ajaxFileUpload是一個異步上傳文件的jQuery插件。
語法:$.ajaxFileUpload([options])
options參數說明:
1、url 上傳處理程序地址。
2,fileElementId 需要上傳的文件域的ID,即<input type="file">的ID。
3,secureuri 是否啟用安全提交,默認為false。
4,dataType 服務器返回的數據類型。可以為xml,script,json,html。如果不填寫,jQuery會自動判斷。
5,success 提交成功后自動執行的處理函數,參數data就是服務器返回的數據。
6,error 提交失敗自動執行的處理函數。
7,data 自定義參數。這個東西比較有用,當有數據是與上傳的圖片相關的時候,這個東西就要用到了。
8, type 當要提交自定義參數時,這個參數要設置成post
錯誤提示:
1,SyntaxError: missing ; before statement錯誤
如果出現這個錯誤就需要檢查url路徑是否可以訪問
2,SyntaxError: syntax error錯誤
如果出現這個錯誤就需要檢查處理提交操作的服務器后台處理程序是否存在語法錯誤
3,SyntaxError: invalid property id錯誤
如果出現這個錯誤就需要檢查文本域屬性ID是否存在
4,SyntaxError: missing } in XML expression錯誤
如果出現這個錯誤就需要檢查文件name是否一致或不存在
5,其它自定義錯誤
大家可使用變量$error直接打印的方法檢查各參數是否正確,比起上面這些無效的錯誤提示還是方便很多。
在使用ajaxfileupload上傳文件的時候,文件上傳成功了,但是返回的json數據一直解析不了。一直提示:Resource interpreted as Document but transferred with MIME type application/json,從字面上理解返回的是文檔不能轉換為json。但是從服務器那邊返回的response里data-type確實是applicaiton/json。困擾很久,查看ajaxfileupload源代碼發現,其實ajaxfileupload其實使用iframe+form的方式實現異步上傳文件的,如下
//穿件form表單函數 createUploadForm: function (id, fileElementId, data) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); //上傳調用接口 ajaxFileUpload: function (s) { // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id = s.fileElementId; var form = jQuery.createUploadForm(id, s.fileElementId, s.data); //創建form表單 var io = jQuery.createUploadIframe(id, s.secureuri);//創建Iframe
知道了上傳流程,明白了問題出現在哪里了,是用Iframe的時候,返回的時候會添加上html和body標簽。jquery不能直接解析的話,只能自己解析了。
ajaxfileupload調用的時候dataType不用設置,使用默認text/html.返回的數據作處理:
var str = $(data).find("body").text();//獲取返回的字符串
var json = $.parseJSON(str);//把字符串轉化為json對象