本人最近在學習PHP，並在用PHP寫一個簡單的個人部落格網站的時候需要對個人的頭像進行非同步上傳，經過研究，成功實現了ajaxFileUpload+PHP的非同步上傳功能，所以抽空做下總結，本文主要講解ajaxFileUpload 非同步上傳檔案配合PHP使用

jQuery外掛ajaxFileUpload可以實現ajax檔案上傳，使用非常簡單。

準備環境

jquery.js
ajaxfileupload.js

注意：jquery-1.4.2之後的版本和ajaxfileupload.js 報錯：jQuery.handleError is not a function，詳細解決方法可以參考我上一篇的博文：

ajaxfileupload原理

原理：ajaxfileupload是通過監聽iframe的onload方法來實現， 當從服務端處理完成後，就觸發iframe的onload事件呼叫其繫結的方法，在繫結的方法中獲取iframe中伺服器返回的資料體（支援的普通文字,json,xml,script, html）

語法：$.ajaxFileUpload([options])

引數說明：

1，url 上傳處理程式地址，也就是我傳送給伺服器端所要處理上傳的地址。

2，fileElementId 需要上傳的檔案域的ID，即的ID。

3，secureuri 是否啟用安全提交，預設為false。

4，dataType 伺服器返回的資料型別。可以為xml,script,json,html。如果不填寫，jQuery會自動判斷。

5，success 提交成功後自動執行的處理函式，引數data就是伺服器返回的資料。

6，error 提交失敗自動執行的處理函式。

7，data 自定義引數。這個很有用，比如你上傳圖片的同時想把圖片名也一起傳過去，可以用這個引數去實現。

8，type 當要提交自定義引數時，這個引數要設定成post

接下來我們看看如何去使用

靜態頁面的程式碼

<div class="form-group"
 
>
   <label for="firstname" class="col-sm-1 control-label">頭像</label>
    <div class="col-sm-2">
     <label for="inputfile"></label>

    <input type="hidden" id="headImg"/>

    <input type="file" id="headImgUpload" name="headImgUpload"/><br/>
       <label class="control-label" for="headImgUpload" style="display: none;"></label>
        <p class="help-block"><img class="img-rounded" src="#" width="100" height="100" id="img1" alt="請上傳頭像"  /></p>
        </div>
  </div>

顯示結果如下：

引入js程式碼

ajaxHeardImgUpload.js檔案如下：

$(document).ready(function(){
    //解決file的change事件只能執行一次的問題
    $(document).on('change','#headImgUpload',function(){
        ajaxHeadImgUpload();

    });
});


//上傳頭像圖片的方法，
function ajaxHeadImgUpload(){
    //呼叫ajaxfileupload.js中的方法
    $.ajaxFileUpload({
        url:'/MyBlog/index.php?p=back&c=Uploader&a=uploaderHead',//上傳圖片要提交到的PHP後臺Action方法
        secureuri:false,//是否用安全提交，預設為false
        fileElementId:'headImgUpload',//file選擇檔案的框的id
        dataType:'json',//資料返回格式，如果用json，需要修改ajaxfileupload.js中的內容 eval("data = " + data ); -->data = jQuery.parseJSON(jQuery(data).text());
        success: function (data){
            if(data.success){
                //獲得json格式資料的值，並轉換顯示圖片在頁面上
                 $("#img1").attr("src",data.path);
                 $("#headImg").val(data.path);

            }
            showInfo(data.info);
        },
        error: function(data, status, e){   //提交失敗自動執行的處理函式
            alert(e);
        }
    });
}


function showInfo(msg) {
    $("#div_info").text(msg);
    $("#modal_info").modal('show');
}

PHP中的處理上傳的程式碼

<?php
/**
 * Created by PhpStorm.
 * User: c
 * Date: 2017/4/17
 * Time: 9:03
 */

class UploaderController extends BaseController {


    //上傳頭像方法
    public function uploaderHeadAction(){
        $fileName = "headImgUpload";
        $this->uploader($fileName);

    }

    //上傳微信二維碼方法
    public function uploaderWeChatAction(){
        $fileName = "wechatImgUpload";
        $this->uploader($fileName);

    }




    public function uploader($fileName) {
        $files = array();
        $files['name'] = $_FILES[$fileName]['name'];   //上傳圖片的原名字
        $files['info'] = ""; //和該檔案上傳相關的資訊
        $files['size'] = $_FILES[$fileName]['size'];   //已上傳檔案的大小，單位為位元組
        $files['type'] = $_FILES[$fileName]['type'];   //檔案的 MIME 型別，需要瀏覽器提供該資訊的支援，例如"image/gif"
        $files['success'] = false;            //這個用於標誌該圖片是否上傳成功
        $files['path'] = '';                //存圖片路徑

        //：0:表示沒有發生錯誤
        if($_FILES[$fileName]['error']==0){
            //is_uploaded_file — 判斷檔案是否是通過 HTTP POST 上傳的
            if(is_uploaded_file($_FILES[$fileName]['tmp_name'])) {
                    //副檔名
                 $extension = '';
                 //strcmp — 二進位制安全字串比較 （區分大小寫）
               // 如果 str1 小於 str2 返回 < 0； 如果 str1 大於 str2 返回 > 0；如果兩者相等，返回 0。
                 if(strcmp($_FILES[$fileName]['type'], 'image/jpeg') == 0) {
                     $extension = '.jpg';
                  }else if(strcmp($_FILES[$fileName]['type'], 'image/png') == 0) {
                     $extension = '.png';
                  }else if(strcmp($_FILES[$fileName]['type'], 'image/gif') == 0) {
                     $extension = '.gif';
                 }else{
                     //如果type不是以上三者，我們就從圖片原名稱裡面去擷取判斷去取得(處於嚴謹性)
                     //strrchr — 查詢指定字元在字串中的最後一次出現
                     $substr = strrchr($_FILES[$fileName]['name'], '.');
                     if(FALSE != $substr) {
                         $files['info'] = "檔案型別有誤";
                     }
                      //strcasecmp — 二進位制安全比較字串（不區分大小寫），比較字串是否相同
                     //如果 str1 小於 str2 返回 < 0； 如果 str1 大於 str2 返回 > 0；如果兩者相等，返回 0。
                     //取得原名字的副檔名後，再通過副檔名去給type賦上對應的值
                     if(strcasecmp($substr, '.jpg') == 0 || strcasecmp($substr, '.jpeg') == 0 || strcasecmp($substr, '.jfif') == 0 || strcasecmp($substr, '.jpe') == 0 ) {
                         $files['type'] = 'image/jpeg';
                     }else if(strcasecmp($substr, '.png') == 0) {
                         $files['type'] = 'image/png';
                     } else if(strcasecmp($substr, '.gif') == 0) {
                         $files['type'] = 'image/gif';
                     }else {
                         $files['info'] = "上傳的檔案型別不符合";
                     }
                     $extension = $substr;//賦值副檔名

                 }

                 if(trim($files['info'])==""){
                    //對臨時檔名加密，用於後面生成複雜的新檔名
                    $md5 = md5_file($_FILES[$fileName]['tmp_name']);
                    //取得圖片的大小
                    //getimagesize() 函式將測定任何 GIF，JPG，PNG，SWF，SWC，PSD，TIFF，BMP，IFF，JP2，JPX，JB2，JPC，XBM
                    // 或 WBMP 影象檔案的大小並返回影象的尺寸以及檔案型別
                    //和一個可以用於普通 HTML 檔案中 IMG 標記中的 height/width 文字字串。
                    $imageInfo = getimagesize($_FILES[$fileName]['tmp_name']);
                    $rawImageWidth = $imageInfo[0];
                    $rawImageHeight = $imageInfo[1];
                    //設定圖片上傳路徑，放在upload資料夾，以年月日生成資料夾分類儲存，

                    $path = ROOT . 'upload\\' . @date("Ymd"). '\\';
                    ///確保目錄可寫
                    if($this->ensure_writable_dir($path)){
                        ////檔名
                        $name = "$md5.0x{$rawImageWidth}x{$rawImageHeight}{$extension}";
                        //加入圖片檔案沒變化到，也就是存在，就不必重複上傳了，不存在則上傳
                        $ret = file_exists($path . $name) ? true : move_uploaded_file($_FILES[$fileName]['tmp_name'], $path . $name);
                        if ($ret === false) {
                            $files['info'] = "上傳失敗";
                        } else {
                            $files['path'] = "\\MyBlog\\upload\\" . @date("Ymd"). '\\'. $name;        //存圖片路徑
                            $files['success'] = true;            //圖片上傳成功標誌
                            $files['width'] = $rawImageWidth;    //圖片寬度
                            $files['height'] = $rawImageHeight;    //圖片高度
                            $files['info'] = "上傳成功";//寫入成功
                        }
                    }else{
                        $files['info'] = "目錄不可寫";//目錄不可寫
                    }
                 }

            }else{
                $files['info'] = "上傳失敗";//上傳失敗
            }

        }


        echo json_encode(array(
            'success' =>  $files['success'],
            'path' => $files['path'],
            'info'=>$files['info'],
         ));
    }


    /**
     * 判斷是否可寫
     * @param $dir
     * @return bool
     */
    function ensure_writable_dir($dir) {
        if(!file_exists($dir)) {
            mkdir($dir, 0766, true);
            chmod($dir, 0766);
            chmod($dir, 0777);
        }
        else if(!is_writable($dir)) {
            chmod($dir, 0766);
            chmod($dir, 0777);
            if(!is_writable($dir)) {
               return false;
            }
        }
        return true;
    }


}

最後就可以看到上傳結果了：

本例子的上傳處理還對上傳檔案的型別進行限制，本例子限制只能上傳圖片，如果上傳的型別不符合，會出現提示：

程式碼基本上都加上了註釋，方便大家理解，雖然這裡使用PHP做檔案上傳處理，但具體的上傳思路都是相同的。如果你想看ajaxFileUpload +Struts2的簡單使用，可以檢視我的博文：ajaxFileUpload 非同步上傳檔案配合Struts2的簡單使用