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

　　上传后台：

 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);

　　

欢迎大家来交流！

喜欢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. Python 1 —— Start Up

    作为一种脚本语言,Python号称是万能的胶带语言,可以非常好的作为多种语言之间的粘合剂,因此从多种语言融合的角度看,学习Python是非常有必要的!下面对学习Python当中的一些重点进行记录! 一 ...

  2. Windows 8.1 应用再出发 - 几种常用控件

    本篇为大家简单介绍Windows 商店应用中控件的用法,为方便讲解,我们在文本控件和按钮控件这两类中分别挑选有代表性的控件进行详细说明. 1. 文本控件 (1) TextBlock TextBlock ...

  3. ASP.NET 连接MySQL数据库 详细步骤

    ASP.NET默认的数据库是MS SQL Server,微软的数据库产品.事实上,如果不计成本因素的话,Windows Server + IIS + MS SQL Server + ASP.NET是网 ...

  4. VS .sln .csproj 文件的右键编译

    背景:VS很好很强大,但太费系统资源了,尤其是在虚拟机在里面装VS的时候更是如此.有时用vi编辑了源代码后,不想开VS IDE编译,但每次打开VS命令行,再切换到工程所在目录,然后手动敲命令太麻烦了. ...

  5. 基于Qt的流程设计器（一）

    一: 先来看一下界面的截图:   说明: 拖动节点的时候,与该节点相关的箭头连线也会跟着调整: 用户可以使用鼠标从一个节点拖出一个箭头到另一个节点(鼠标在空白区域点击一下,拖出的箭头消失)   这三个 ...

  6. [ACM_模拟] ZJUT 1155 爱乐大街的门牌号 (规律 长为n的含k个逆序数的最小字典序）

    Description ycc 喜欢古典音乐是一个 ZJUTACM 集训队中大家都知道的事情.为了更方便地聆听音乐,最近 ycc 特意把他的家搬到了爱乐大街(德语Philharmoniker-Stra ...

  7. 自旋锁-SpinLock（.NET 4.0+）

    短时间锁定的情况下,自旋锁(spinlock)更快.(因为自旋锁本质上不会让线程休眠,而是一直循环尝试对资源访问,直到可用.所以自旋锁线程被阻塞时,不进行线程上下文切换,而是空转等待.对于多核CPU而 ...

  8. 阻塞队列BlockingQueue用法

    多线程环境中,通过队列可以很容易实现数据共享,比如经典的“生产者”和“消费者”模型中,通过队列可以很便利地实现两者之间的数据共享. 假设我们有若干生产者线程,另外又有若干个消费者线程.如果生产者线程需 ...

  9. paip.提高稳定性---自动检测sleep mysql数据库死连接以及kill

    paip.提高稳定性---自动检测sleep mysql数据库死连接以及kill 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:ht ...

  10. Sql Server 调用DLL

    背景 在处理数据或者分析数据时,我们常常需要加入一定的逻辑,该些处理逻辑有些sql是可以支持,有些逻辑SQL则无能为力,在这种情况下,大多数人都会编写相关的程序来处理成自己想要的数据,但每次处理相同逻 ...