基于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 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
js调试系列 初识控制台
Jun 18 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
canvas实现钟表效果
Feb 13 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
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中的Class的几点个人看法
2006/10/09 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
javascript控制台详解
2015/06/25 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
python中的set实现不重复的排序原理
2018/01/24 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
女娲补天教学反思
2014/02/05 职场文书
社会学专业求职信
2014/02/24 职场文书
关于安全的标语
2014/06/10 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
2019销售早会主持词
2019/06/27 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers