HTML5 FormData 用jquery 異步上傳報錯

平時作表單都是跳轉提交的,可是今天要作一個ajax圖片異步上傳,html

網上搜索了下,方法都比較老了,竟然還有用flash的,html5

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

我寫的代碼以下:ajax

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;
        }
  });
}

可是報錯了,錯誤以下json

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

既然瀏覽器明明顯示支持formdata,爲什麼這裏顯示append不是formdata接口呢?瀏覽器

答案只多是jquery重載了formdataapp

在裏面加上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/190post

相關文章
相關標籤/搜索