平時作表單都是跳轉提交的,可是今天要作一個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