jQuery File Upload跨域上传

最新推荐文章于 2019-12-09 14:37:01 发布

weixin_34242819

最新推荐文章于 2019-12-09 14:37:01 发布

阅读量657

点赞数

文章标签： javascript c# 前端框架 ViewUI

　　最近在做一个一手粮互联网项目，方案为前后端分离，自己负责前端框架，采用了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

weixin_34242819

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery File Upload跨域上传

　　最近在做一个一手粮互联网项目，方案为前后端分离，自己负责前端框架，采用了Requirejs+avalonjs+jquery三个框架完成。　　前后端通过跨域实现接口调用，中间也发现了不少问题，尤其是在富文本编辑器和上传插件跨域的处理过程中，费劲了脑汁，总算解决了。　　上传选择了jQuery File Upload，兼容性还是相对不错，并且支持跨域，但是没有一个完整的跨域Demo，只能看源...
复制链接

扫一扫