最近在做一个一手粮互联网项目，方案为前后端分离，自己负责前端框架，采用了Requirejs+avalonjs+jquery三个框架完成。

　　前后端通过跨域实现接口调用，中间也发现了不少问题，尤其是在富文本编辑器和上传插件跨域的处理过程中，费劲了脑汁，总算解决了。

　　上传选择了jQuery File Upload，兼容性还是相对不错，并且支持跨域，但是没有一个完整的跨域Demo，只能看源码找帮助。

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

　　页面实现方法：

　　页面引入：

  1. 　　<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>   
  3. 　 上传页面
    　 <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

  1. <body>
  2.     <script type="text/javascript">
  3.         document.body.innerText=document.body.textContent=decodeURIComponent(window.location.search.slice(1));
  4.     </script>
  5. </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

jQuery File Upload跨域上传的更多相关文章

  1. 用jQuery File Upload做的上传控件demo，支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  2. Angular4 后台管理系统搭建（10） - 做一个通用的可跨域上传文件的组件

    写的很慢,不知不觉这是第十篇了.但是我其他事情太多,只能抽空写下.现在angular4或angular2流行的上传方式是ng2-file-upload.它的功能很强大.但是我没有配置成可以跨域上传的. ...

  3. 我是如何一步步编码完成万仓网ERP系统的（七）产品库设计 3.品牌图片跨域上传

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  4. Editor.md解决跨域上传的问题

    Editor.md解决跨域上传的问题 编辑 editormd\plugins\image-dialog\image-dialog.js 替换以下代码片段 if (settings.crossDomai ...

  5. html5上传图片(一)一跨域上传

    最近开发一个上传图片的模块,传图片的接口不支持跨域上传,并且只支持单张上传,而我们的产品要求要实现多张上传.我搞了一个代理页面,先将图片传到代理页面,然后再通过代理页面传到上传图片接口.虽然这种方式经 ...

  6. 从Ueditor跨域上传，总结的一次跨域上传的爬坑经历

    项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...

  7. Ueditor1.4.3实现跨域上传到独立文件服务器，完美解决单文件和多文件上传！

    再写配置方法之前先吐槽一下网上的各种教程,TM没一个有卵用,一群傻屌不会写就别写,写了就要负责. 百度google搜了半天,全是配置什么document.domain,根域名什么的,我只想对你说: 好 ...

  8. webuploader 跨域上传demo(还没有写记录一下)

    webuploader 跨域上传demo(还没有写记录一下)

  9. js跨域上传文件 iframe

    封装好的jq插件 (function () { var iframe = '<iframe name="jqUploadIframe" style="display ...

随机推荐

  1. 配置iDempiere源码开发环境

    你需要一个较为快速通畅的互联网连接来下载源代码! 安装软件: OS: Windows Server 2008 R2 SP1 x64 英文版 Database: Oracle 11G R2 x64 英文 ...

  2. 跟我一起学WCF(12)——WCF中Rest服务入门

    一.引言 要将Rest与.NET Framework 3.0配合使用,还需要构建基础架构的一些部件.在.NET Framework 3.5中,WCF在System.ServiceModel.Web组件 ...

  3. C#设计模式(22)——访问者模式（Vistor Pattern）

    一.引言 在上一篇博文中分享了责任链模式,责任链模式主要应用在系统中的某些功能需要多个对象参与才能完成的场景.在这篇博文中,我将为大家分享我对访问者模式的理解. 二.访问者模式介绍 2.1 访问者模式 ...

  4. [Hyper-V]制作一个干净的操作系统模板

    描述: 在Hyper-V里创建虚拟机的时候,我们可以先来创建一个干净的操作系统,将其制作为操作系统模板,该虚拟机的磁盘文件也将被视作基础磁盘以方便基于它创建差异化磁盘 安装其它虚拟机的时候就可以差异化 ...

  5. [游戏模版9] Win32 半透明 图像处理

    >_<:Previous part we talk about how to map a transparent picture, and this time we will solve ...

  6. 只有好的棋手才会走运-《打造Facebook》读后感

    王淮的<打造Facebook>一书不厚,花半天时间轻松读完.书中没有大段的说教,只有近乎流水的陈述.正如作者所说,打造Facebook这本书由巴克伯格来写再合适不过.可惜他至少在近几年内没 ...

  7. Linux内存寻址

    我会尽力以最简洁清晰的思路来写这篇文章. 所谓内存寻址也就是从写在指令里的地址,转化为实际物理地址的过程.因为操作系统要兼顾许多东西,所以也就变得复杂. 逻辑地址 → 线性地址 → 物理地址 逻辑地址 ...

  8. celery简单应用

    写作背景介绍 在celery简单入门中已经介绍了写作的背景,这篇文章主要是深入介绍celery的使用技巧.在实际的项目中我们需要明确前后台的分界线,因此我们的celery编写的时候就应该是分成前后台两 ...

  9. 文件上传小技巧/后端处理【以php示例】

    引语:在上一篇文章中说到,在页面中可以用隐藏的方式让你的上传页面看起来漂亮.但是这对于性能来说,并没有什么卵用,那么在后台的处理中,难道就没有一些处理技巧么?所谓后台的技巧,应该要包括上传得快一点,上 ...

  10. Python之线程池

    版本一: #!/usr/bin/env python # -*- coding:utf-8 -*- import Queue import threading class ThreadPool(obj ...