作為一個開發人員，踩坑是必要的，不踩坑是不長進的。今天我們就來談談ajax上傳檔案時可能遇到的幾個大坑。
html 檔案：

</div>
<input type="file" id="fileloader"  name="file" />
<button  id="fileuploader">開始上傳</button>
</div>

$(function(){
    $('#fileuploader').click(function () {
    //獲取上傳檔案的相關資訊，得到的資料是陣列格式
        var
 
 fileArray = document.getElementById('fileloader').files;
        var formData = new FormData();
       for(var i=0; i<fileArray.length; i++){
            formData.append("fileArray", fileArray[i]);
        }
        console.log(fileArray);
         $.ajax({
             url: "../Myutil/upLoad_File"
 
,//傳向後臺伺服器檔案
             type: 'post',    //傳遞方法
             data: formData,  //傳遞的資料
             dataType : 'json',  //傳遞資料的格式
             async:false, //這是重要的一步，防止重複提交的                   
             cache: false,  //設定為false，上傳檔案不需要快取。
             contentType: false,//設定為false,因為是構造的FormData物件,所以這裡設定為false。
 

             processData: false,//設定為false,因為data值是FormData物件，不需要對資料做處理。
             success: function (responseStr) {
                 if(responseStr.msg!=1){
                     alert(responseStr.info);
                 }else{
                     alert(responseStr.info);
                 }
             },
             error: function () {
                alert("上傳錯誤！");
             }
         });

        //阻止繼續呼叫函式
      // return false;
    });
});

上面的程式碼是ajax向伺服器傳遞檔案的方法，其中需要特別注意：
1.async:false,
false為同步，這個Ajax請求將整個瀏覽器鎖死，只有upLoad_File方法執行結束後，才可以執行其它操作。
2.async: true，
true是非同步的，這個ajax請求和其後面的操作是非同步執行的，那麼當upLoad_File方法還未執行完，就可能已經執行了 ajax請求後面的操作，如：alert(responseStr.info);然而，info這個資料是在ajax請求success後才賦值的，結果，輸出時會為空。

當然還有另一種方式來達到和同步的同種效果，那就是在函式體末尾加 return false;來防止函式的繼續呼叫。

伺服器接收檔案
我用的是php語言和thinkphp框架,編寫的接收方法如下

 public function upLoad_File(){
         //檔案儲存路徑
         $output_dir = APP_PATH."/../upload/";
         //獲取上傳檔名
         $fileName=$_FILES['fileArray']['name'];
         //獲取上傳檔案
         $file=$_FILES['fileArray'];
         if (!isset($file)){
                $this->ajaxReturn(array(
                    'msg'=>0,
                    "info"=>"檔案上傳失敗!",
                ));
            }else{
//上傳檔案
          if([email protected]_uploaded_file($file['tmp_name'],$output_dir.$fileName)){
                        $this->ajaxReturn(array(
                            'msg'=>0,
                            "info"=>"檔案上傳失敗!",
                        ));
                    } ;
                    $this->ajaxReturn(array(
                        'msg'=>1,
                        "info"=>"檔案上傳成功！!",
                    ));
                   // return $fileName;

        }
     }

服務端接收檔案需要注意的地方是$_FILES[‘fileArray’]，它就是ajax傳過來的formData.append(“fileArray”, fileArray[i])資料。