基于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抖动元素的小例子
Oct 28 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
React事件处理的机制及原理
Dec 03 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
Servlet返回的数据js解析2种方法
Dec 12 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 文件上传全攻略
2010/04/28 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python输出9*9乘法表的方法
2015/05/25 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python3中int(整型)的使用教程
2017/03/23 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python类共享变量操作
2020/09/03 Python
联想德国官网:Lenovo Germany
2018/07/04 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
人事文员岗位职责
2014/02/16 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
动员大会主持词
2014/03/20 职场文书
《春晓》教学反思
2014/04/20 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
党员思想汇报材料
2014/12/19 职场文书
公务员个人总结
2015/02/12 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书