HTML5 FormData 用jquery 異步上傳報錯

平時做表單都是跳轉提交的，但是今天要做一個ajax圖片異步上傳，

網上搜索了下，方法都比較老了，居然還有用flash的，

普通的表單上傳通過jquery的serialize()轉換成querystring后就可以直接ajax post 上傳，但是碰到文件上傳就不奏效了，型號html5有個方法FormData()可以實現上傳，

我寫的代碼如下：

function upThumbSubmit() {
if(!window.FormData) {　
        alert('your brower is too old');
        return false;
    }
 var formData = new FormData($( "#upForm" )[0]);

  $.ajax({
        url:'?c=api&a=upload',
        type:'post',
        data:formData,
        dataType:'json',
        success:function(data){
          alert(data);
          return false;
        }
  });
}

但是報錯了，錯誤如下

TypeError: 'append' called on an object that does not implement interface FormData.

既然瀏覽器明明顯示支持formdata,為何這里顯示append不是formdata接口呢？

答案只可能是jquery重載了formdata

在里面加上2個option,就好了，正確代碼如下

function upThumbSubmit() {
if(!window.FormData) {　
        alert('your brower is too old');
        return false;
    }
 var formData = new FormData($( "#upForm" )[0]);

  $.ajax({
        url:'?c=api&a=upload',
        type:'post',
        data:formData,
        processData: false,
        contentType: false,
        dataType:'json',
        success:function(data){
          alert(data);
          return false;
        }
  });
}

 

原文鏈接：http://www.tiyee.net/post/190