GIT 下載地址
https://github.com/blueimp/jQuery-File-Upload
親測HTTPS HTTP跨域無壓力
不用自帶的DEMO
用下面的DEMO
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery File Upload Example</title> </head> <style> .bar { height: 18px; background: green; } .content{ width: 100%;text-align: center;margin-top: 70px; } #progress{ border-radius:6px;width: 300px;background: red; margin: 10px auto; } </style> <body> <div class="content"> <input id="fileupload" type="file" name="upfile" "> <div id="progress"> <div class="bar" style="width: 0%;"></div> </div> <img id="uploadimg" src="__PUBLIC__/images/bg.jpg" width="400px" height="408px"/> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script> $('#fileupload').fileupload({ url: "", type:"POST", dataType:"json", autoUpload : true, acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
//跨域
forceIframeTransport: true,
formData: { action:"UploadVMKImagePath", param:JSON.stringify({ projectId:12343, fileType:"任務日志圖片" }) }, done: function (e, data) { console.log(e); console.log(data);//data里面包含了服務端返回的字段 }, fail:function(e,data){ console.log("上傳失敗："+data.errorThrown); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100); $('#progress .bar').css( 'width', progress + '%' ); }, }); </script> </body> </html>
中間遇到的問題是，一旦采用了跨域 就會使用FROM包含 iframe的方式上傳，所以在done函數里是無法直接拿到服務器的返回值的。
這個插件定義的是這樣 如果采用了iframe方式，必須要設置一個CALL參數，當服務器接受完你的上傳數據 回CALL你設置的頁面
redirectParamName:"callUrl",
redirect:"http://"+window.location.host+"/app/callupload.html?",//回調頁面
很顯然服務端要接受和處理你這個callurl，不過這次的項目中，目標上傳服務器的處理完上傳后，是直接把數據寫到頁面的。而不是去CALL什么地址。。
沒法。。只有從其他地方下手了。
通過調試發現
既然iframe,上傳完成后服務端的返回內容一定iframe里面的。
jquery.iframe-transport.js
在這個文件里的下面代碼中可以記錄下服務器返回的結果
window.setTimeout(function () { // Removing the form in a setTimeout call // allows Chrome's developer tools to display // the response result console.log("【upload-iframe】"); console.log(iframe); //form.remove(); }, 0);
iframe 這個參數在jquery.iframe-transport.js中就定義好了，輸出看看就知道了