jQuery File Upload跨域上傳

  最近在做一個一手糧互聯網項目,方案爲前後端分離,自己負責前端框架,採用了Requirejs+avalonjs+jquery三個框架完成。

  前後端通過跨域實現接口調用,中間也發現了不少問題,尤其是在富文本編輯器和上傳插件跨域的處理過程中,費勁了腦汁,總算解決了。

  上傳選擇了jQuery File Upload,兼容性還是相對不錯,並且支持跨域,但是沒有一個完整的跨域Demo,只能看源碼找幫助。

  下載地址:https://github.com/blueimp/jQuery-File-Upload

  頁面實現方法:

  頁面引入:

  <link rel="stylesheet" type="text/css" href="../../src/widget/jQueryFileUpload/css/jquery.fileupload.css">
  <link rel="stylesheet" type="text/css" href="../../src/widget/jQueryFileUpload/css/jquery.fileupload-ui.css">
  <script type="text/javascript" src=".../../src/widget/jQueryFileUpload/js/vendor/jquery.ui.widget.js"></script>
  <script type="text/javascript" src=".../../src/widget/jQueryFileUpload/js/jquery.iframe-transport.js"></script>
  <script type="text/javascript" src=".../../src/widget/jQueryFileUpload/js/jquery.fileupload.js"></script>

 
上傳頁面
  <input id="fileupload" type="file" name="files" multiple>
 1 $('#fileupload').fileupload({
 2             url: config.getUrl()+"upload!upload.do",
 3             type:"POST",
 4             dataType:"json",
 5             autoUpload : true,
 6             acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
 7             formData: {model:1},
 8             forceIframeTransport: true,
 9             redirectParamName:"callUrl",
10             redirect:"http://"+window.location.host+"/app/callupload.html?",//回調頁面
11             done: function (e, data) {
12                 $.each(data.result.files, function (index, file) {
13                     model.fileVO.push({attach_root_id:file.id,file_path:file.url});
14                 });
15             },
16             fail:function(e,data){
17                 console.log("上傳失敗:"+data.errorThrown);
18             }
19         });
View Code

  創建一個回調頁面callupload.html

<body>
    <script type="text/javascript">
        document.body.innerText=document.body.textContent=decodeURIComponent(window.location.search.slice(1));
    </script>
</body>
View Code

  上傳後臺:

1 string result = file.FileName;
2              context.Response.Headers.Add("Cache-Control", "no-cache");
3              context.Response.AddHeader("Access-Control-Allow-Origin", "*");
4              context.Response.AddHeader("Access-Control-Allow-Headers", "x-requested-with");
5              context.Response.AddHeader("Location", callUrl + "?msg=" + result);
6              context.Response.Redirect(callUrl + "?msg=" + result); 
View Code

  

歡迎大家來交流!

喜歡H5,web開發的朋友可以加羣:374166122

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章