1. 程式人生 > >php+ajax上傳圖片

php+ajax上傳圖片

js:

    var imgarr = [];
    $('.file').on('change',function(e){
       var inp = $(this);
       var up = $(e.currentTarget).parents('li');
        $("#mainForm").ajaxSubmit({
        url : "<{:U('Release/ajaxUpload')}>", // 請求的url  
        type : "post", // 請求方式  
        dataType : "json", // 響應的資料型別  
        async :true, // 非同步  
        success: function (data1) { 
            // alert(data1);
            // $('.uploadImg').empty();
           var ele = "\
            <li class='img'>\
                <img src='"+data1+"'>\
                <i class='iconfont icon-delete2' onclick='remove(this)'></i>\
            </li>";
            //$('.imgBox').before(ele);
            up.before(ele)
            $('#mainForm').find('input[name=image]').val(data1);
            imgarr.push(data1);
        },  
        error : function(){  
            alert("資料載入失敗!"); 
        }  
         });     


    });
<ul class="imgBox" id="1">
                    <li class="up">
                        <span><i class="iconfont icon-plus-bold"></i></span>
                        <input  type="file" name="img" class="file">
                    </li>
                </ul>

php程式碼:

    /**
     * 上傳圖片
     */
    public function ajaxUpload()
    {
        $pic = $_FILES['img'];
        $path_pic = './Public/static/images';
        if (!empty($pic['name'])) {
            $pic_res = uploadFile($pic, $path_pic);

            if ($pic_res['status'] == 1) {

                $this->ajaxReturn(trim($pic_res['dest'], '.'));
            } else {
                $this->ajaxReturn(0);
            }
        } else {
            $this->ajaxReturn(0);
        }
    }

uploadFile函式:

//檔案上傳
function uploadFile($fileInfo, $path = './public/static/images/', $flag = true, $allowExt = array('jpeg', 'jpg', 'png', 'gif', 'mp3', 'wav', 'wma', ''), $maxSize = 524288000)
{
    //判斷錯誤號
    if ($fileInfo['error'] == 0) {
        //檢測上傳檔案的大小  
        if ($fileInfo['size'] > $maxSize) {
            $res['mes'] = $fileInfo['name'] . '上傳檔案過大';
        }
        $ext = strtolower(pathinfo($fileInfo['name'], PATHINFO_EXTENSION));
        //檢測上傳檔案的檔案型別  
        if (!in_array($ext, $allowExt)) {
            $res['mes'] = $fileInfo['name'] . '非法檔案型別';
        }
        //檢測是否是真實的圖片型別  
        if ($flag) {
            if (!getimagesize($fileInfo['tmp_name'])) {
                $res['mes'] = $fileInfo['name'] . '不是真實圖片型別';
            }
        }
        // 檢測檔案是否是通過HTTP POST上傳上來的  
        if (!is_uploaded_file($fileInfo['tmp_name'])) {
            $res['mes'] = $fileInfo['name'] . '檔案不是通過HTTP POST方式上傳上來的';
        }
        if ($res) return $res; //如果要不顯示錯誤資訊的話,用if( @$res ) return $res;

        //$path='./uploads';  
        //如果沒有這個資料夾,那麼就建立一  
        if (!file_exists($path)) {
            mkdir($path, 0777, true);
            chmod($path, 0777);
        }

        //新檔名唯一  
        $uniName = md5(uniqid(microtime(true), true));
        $destination = $path . '/' . $uniName . '.' . $ext;

        //@符號是為了不讓客戶看到錯誤信,也可以刪除 
        if ([email protected]_uploaded_file($fileInfo['tmp_name'], $destination)) {
            $res['mes'] = $fileInfo['name'] . '檔案移動失敗';
        }
        $res['mes'] = $fileInfo['name'] . '上傳成功';
        $res['status'] = 1;
        $res['dest'] = $destination;
        return $res;
    } else {
        //匹配錯誤資訊  
        //注意!錯誤資訊沒有5  
        switch ($fileInfo['error']) {
            case 1:
                $res['mes'] = '上傳檔案超過了PHP配置檔案中upload_max_filesize選項的值';
                break;
            case 2:
                $res['mes'] = '超過了HTML表單MAX_FILE_SIZE限制的大小';
                break;
            case 3:
                $res['mes'] = '檔案部分被上傳';
                break;
            case 4:
                $res['mes'] = '沒有選擇上傳檔案';
                break;
            case 6:
                $res['mes'] = '沒有找到臨時目錄';
                break;
            case 7:
                $res['mes'] = '檔案寫入失敗';
                break;
            case 8:
                $res['mes'] = '上傳的檔案被PHP擴充套件程式中斷';
                break;

        }
        $res['status'] = -1;
        return $res;
    }
js需要引入

相關推薦

php+ajax圖片

js: var imgarr = []; $('.file').on('change',function(e){ var inp = $(this); var up = $(e.currentTarget).parents('li')

summernote + spring mvc + ajax 圖片 <筆記>

jsp頁面 答案 cnblogs ase 技術 上傳圖片 理想 很多 1-1 最近在做一個考試系統項目。其中實體答案有這樣的需求,答案A,B,C,D 采用 文本和圖片混搭的形式,並且文本也是富文本。 數據庫中大概是這麽存的 廢話不多說開始上幹貨。。。。 一、首先在j

移動端通過ajax圖片(文件)並在前臺展示——通過H5的FormData對象

com 地址 ces 文件 只需要 capture val data als 前些時候遇到移動端需要上傳圖片和視頻的問題,之前一直通過ajax異步的提交數據,所以在尋找通過ajax上傳文件的方法。發現了H5裏新增了一個FormData對象,通過這個對象可以直接綁定html中

ajax 圖片遇到的坑

上傳圖片 () process als log con pos ajax type var data = new FormData(); data.append("uploadFile", file); ajax要加這兩個參數 processData: fal

PHP壓縮圖片

是否 amp break class gef char mar fread type 最近手上的項目頁面要顯示很多圖片,雖然用了jQuery的lazyload,但是效果並沒理想,滑動到一個區域還要比較長的時間圖片才完全顯示出來。於是想著將上傳上去的900KB+壓縮備份一份縮

ajax圖片

script class soft imp XML 表單 import 項目 javascrip 某一個項目需要和java後端做數據交互,需要用到上傳,並且是跨域、鑒權上傳,整理在此,以便有需要的時候能有記錄 方法一、 function Upfile() {

asp.net core 通過ajax圖片及wangEditor圖片

images use class multi jquery 開始 load als org asp.net core 通過ajax上傳圖片 .net core前端代碼,因為是通過ajax調用,首先要保證ajax能調用後臺代碼,具體參見上一篇.net core 使用ajax

php base64圖片

php base64上傳圖片 $ymd = date("Ymdhis"); //圖片路徑地址 $img = str_replace(‘data:image/png;base64,‘, ‘‘, $img); $img = s

Spring MVC利用Ajax圖片

html <input type="file" onchange="imageUpload(this)" class="form-control" placeholder="點選按鈕選擇圖片"id="pictureUpload"> Ajax function imageU

php input圖片導致所有輸入資料都為null問題

使用form表單來同時提交輸入資料和上傳檔案,但是可能不成功,可能有如下兩種問題: 1、輸入資料OK,但是後臺$_FILES裡面沒有檔案,這種原因一般是form表單裡漏了一個屬性,加上enctype="multipart/form-data"即可 2、另一種情況是本來輸入資料上傳成功,但

PHP圖片自動放縮到指定解析度,保持清晰度

class AutoImage{ private $image; public function resize($src, $width, $height){ //$src 就是 $_FILES['upload_image_file']['tmp_name']

tp3.2 ajax圖片(可以用,樣式要自己寫)

html頁面 <form id="mbInfoForm" action="" method="POST"> <input type="hidden" name="idcard_up" id="idcard_up"> <table class="formTbl">

ajax圖片到服務器簡單操作

鍵值 data gpo art 普通 alt 上傳 格式 ttr 前端: 通過Ajax方式上傳文件,使用FormData進行Ajax請求。上傳文件或圖片時,要求的格式為enctype ="multipart/form-data"(以二進制格式上傳),在使用ajax上傳

formData用ajax圖片

源於http://blog.csdn.net/high2011/article/details/49679475 沒有用框架,直接用java實現上傳圖片小功能 function doUpload() { alert($( "#uploadForm" )[0]);

利用ajax圖片,並使用CURL呼叫介面

這是我第一次使用ajax上傳檔案,並且不通過form表單進行上傳,之前使用ajax上傳檔案時是藉助一個叫form.js的檔案,可以直接使用$.ajaxSumbmit直接提交表單,但這次不同,就是使用ajax上傳,並且將圖片資訊放在ajax要上傳的資料data陣列或物件中,怎麼

ajax圖片並回顯

最近學習了一下上傳圖片並且寫了個demo 活不多說 直接上程式碼 首先 你需要引入ajaxfileupload.js 和 jquery 其次新建一個頁面程式碼如下 <tr> <div class="uploadPicture"> <td st

通過formdata ajax圖片 以及後臺接收formdata資料 mvc

最近一直研究如何通過ajax上傳圖片看了好對用formdata來實現 但是關於springmvc後臺如何接收formdata的資料一直沒有介紹 今天把後臺接收資料也寫下來了 。 有點不完整  但是是能夠實現的   相信有能看懂的  大家見諒  帶有顏色的標記注意一下

如何利用PHP實現圖片及視訊到七牛雲?

七牛是一家怎樣的公司? 七牛雲(隸屬於上海七牛資訊科技有限公司)是國內領先的以視覺智慧和資料智慧為核心的企業級雲端計算服務商,同時也是國內最有特色的智慧視訊雲服務商,累計為 70 多萬家企業提供服務,覆蓋了國內80%網民。圍繞富媒體場景推出了物件儲存、融合 CDN 加速、容

js讀取圖片以及AJAX圖片注意事項

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

flask使用ajax圖片或者檔案

function upload_cover(){ var cover = new FormData(); var fileObj = document.getElementById('cover').files[0];