最近在做一个一手粮互联网项目，方案为前后端分离，自己负责前端框架，采用了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 });
创建一个回调页面callupload.html
<body>
<script type="text/javascript">
document.body.innerText=document.body.textContent=decodeURIComponent(window.location.search.slice(1));
</script>
</body>
上传后台：
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);
欢迎大家来交流！
喜欢H5，web开发的朋友可以加群：374166122