JQuery File Upload实现跨域上传
【摘要】 使用JQuery插件JQuery File Upload实现跨域上传方案
最近在做一个互联网项目，方案为前后端分离，主要负责前端框架设计，经过业务分析，项目采用了Requirejs+avalonjs+jquery三个框架完成开发。
前后端通过跨域实现接口调用，中间也发现和遇到了不少问题，尤其是在富文本编辑器和上传插件跨域的处理过程中，费劲了脑汁，最终总算把问题解决了，记录一下解决过程，以供大家参考和学习。
上传插件（jQuery File Upload）
上传选择了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>JS脚本
$('#fileupload').fileupload({
url: config.getUrl()+"upload!upload.do",
type:"POST",
dataType:"json",
autoUpload : true,
acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
formData: {model:1},
forceIframeTransport: true,
redirectParamName:"callUrl",
redirect:"http://"+window.location.host+"/app/callupload.html?",//回调页面
done: function (e, data) {
$.each(data.result.files, function (index, file) {
model.fileVO.push({attach_root_id:file.id,file_path:file.url});
});
},
fail:function(e,data){
console.log("上传失败："+data.errorThrown);
}
});创建回调页面（callupload.html）
<body>
<script type="text/javascript">
document.body.innerText=document.body.textContent=decodeURIComponent(window.location.search.slice(1));
</script>
</body>后台上传API
后台使用.NET的MVC模式开发的简单的上传示例接口
string result = file.FileName;
context.Response.Headers.Add("Cache-Control", "no-cache");
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.AddHeader("Access-Control-Allow-Headers", "x-requested-with");
context.Response.AddHeader("Location", callUrl + "?msg=" + result);
context.Response.Redirect(callUrl + "?msg=" + result); 文章内容如果写的存在问题欢迎留言指出，让我们共同交流，共同探讨，共同进步~~~
文章如果对你有帮助，动动你的小手点个赞，鼓励一下，给我前行的动力。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）