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

相关文章:

  • 2022-12-23
  • 2021-12-28
  • 2021-10-05
  • 2021-10-08
  • 2021-11-04
  • 2021-10-19
  • 2021-11-30
猜你喜欢
  • 2021-12-27
  • 2021-09-28
  • 2022-03-05
  • 2022-12-23
  • 2021-09-28
  • 2022-12-23
相关资源
相似解决方案