Jquery实现跨域异步上传文件总结


Posted in Javascript onFebruary 03, 2017

先说明白

这个跨域异步上传功能我们借助了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实现跨域异步上传文件总结

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js同源策略详解
May 21 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
javascript 中的继承实例详解
May 05 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
JavaScript中reduce()的用法
May 11 Javascript
js 递归和定时器的实例解析
Feb 03 #Javascript
js实现文本上下来回滚动
Feb 03 #Javascript
jquery代码规范让代码越来越好看
Feb 03 #Javascript
Javascript for in的缺陷总结
Feb 03 #Javascript
canvas绘制七巧板
Feb 03 #Javascript
JS对象是否拥有某属性如何判断
Feb 03 #Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 #Javascript
You might like
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP数组实例详解
2016/06/26 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
Python中endswith()函数的基本使用
2015/04/07 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
python实现BackPropagation算法
2017/12/14 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Python错误的处理方法
2020/06/23 Python
两则小学生的自我评价分享
2013/11/14 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
辞职信格式范文
2015/05/13 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
母亲去世追悼词
2015/06/23 职场文书