基于Jquery插件实现跨域异步上传文件功能


Posted in Javascript onApril 26, 2016

先说明白

这个跨域异步上传功能我们借助了Jquery.form插件,它在异步表单方面很有成效,而跨域我们会在HTTP响应头上添加access-control-allow-method,当然这个头标记只有IE10,火狐和谷歌上支持,对于IE10以下的浏览器来说,我们就不能用这种方式了,我们需要换个思路去干这事,让服务端去重写向我们的客户端,由客户端(与文件上传页面在同域下)来返回相关数据即可。

再做事

1 Jquery.form的使用

<form method="post" action="http://127.0.0.1:801/Home/UploadResult" enctype="multipart/form-data" id="form1">
 <input name="qdctvfile" id="qdctvfile11" type="file" onchange="eventStart()">
</form>
<script type="text/javascript">
 $("#form1").ajaxForm({
  beforeSerialize: function () {
   var filepath = $("#qdctvfile11").val()
   var extStart = filepath.lastIndexOf(".");
   var ext = filepath.substring(extStart, filepath.length).toUpperCase();
   if (ext != ".PNG" && ext != ".JPG") {
    alert("图片仅支持png,jpg格式");
    $("#qdctvfile11").val("");
    return false;
   }
  },
  success: function (data) {
   alert(data);
  }
 });
 function eventStart(obj) {
  $("#form1").submit();
 }

注意,代码中的eventStart方法是指在选择文件后,自动提交表单,而ajaxForm表示提交表单为异常方式,success回调方法是指异步返回表单地址的返回值。

2 跨域的初步实现

解决域访问,我们可以在服务端的响应头上添加Access-Control-Allow-Origin和Access-Control-Allow-Methods两个特性即可,这些特性在IE10以下的浏览器不被支持,很是郁闷。

/// <summary>
 /// MVC模式下跨域访问
 /// </summary>
 public class MvcCorsAttribute : ActionFilterAttribute
 {
  public override void OnActionExecuting(ActionExecutingContext filterContext)
  {
   Dictionary<string, string> headers = new Dictionary<string, string>();

   headers.Add("Access-Control-Allow-Origin", "*");
   headers.Add("Access-Control-Allow-Methods", "*");
   foreach (var item in headers.Keys)
   {
    filterContext.RequestContext.HttpContext.Response.Headers.Add(item, headers[item]);
   }

   base.OnActionExecuting(filterContext);
  }
 }

注意,在生产环境下,我们的Access-Control-Allow-Origin应该是指定合法的域名的,*表示对所以网站都开放访问,这是危险的。

3 解决IE10以下不能跨域的问题

对于IE浏览器确实没法说了,虽然很喜欢微软的东西,但对于IE来说,我只能是NO,我真不想过多的去谈论它,先看看IE实现跨域上传的解决思想:由客户端不直接返回数据,而是重写向到客户端的callback地址,由callback像ajaxForm方法返回最终的数据,这样就解决了直接的跨域问题了。

/// <summary>
  /// 第三方的服务端
  /// </summary>
  /// <param name="name"></param>
  /// <returns></returns>
  [HttpPost]
  public ActionResult UploadResult()
  {
   string data = "{'code':'OK','thumpImgUrl':'http://127.0.0.1/images/1.jpg'}";
   return Redirect("http://localhost:9497/Home/UploadCallback?data=" + data);
  }

  /// <summary>
  /// 可能是服务端来调用它
  /// </summary>
  /// <returns></returns>
  public ActionResult UploadCallback(string data)
  {
   return Content(data);
  }

有些时候,我们在想一个问题的解决方法时,如果一条路走不通过,可以换换思路,也许会有意外的收获!

有人问,这块使用POST方式在服务端与客户端进行数据传递可以不可以,大叔说:不可以,因为POST在提交到客户端后,客户端处理,然后还是把结果返回给服务端,最后服务端再把结果返回给ajaxform,这还是又回到了开始的跨域问题,哈哈!

基于Jquery插件实现跨域异步上传文件功能

基于Jquery插件实现跨域异步上传文件功能

呵呵,怎么样,挺有意思的吧!

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,感谢各位的阅读!

Javascript 相关文章推荐
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
原生js实现日期联动
Jan 12 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
Bootstrap每天必学之模态框(Modal)插件
Apr 26 #Javascript
深入理解JS中的substr和substring
Apr 26 #Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 #Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 #Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 #Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 #Javascript
js 求时间差的实现代码
Apr 26 #Javascript
You might like
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
React组件之间的通信的实例代码
2017/06/27 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
python自动发邮件库yagmail的示例代码
2018/02/23 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python批量发送post请求的实现代码
2018/05/05 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
小学毕业感言300字
2014/02/19 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
体操比赛口号
2014/06/10 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
升职自荐信范文
2015/03/27 职场文书
合同补充协议书
2016/03/24 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书