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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 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
全国中波电台频率表
2020/03/11 无线电
php获取网页内容方法总结
2008/12/04 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php单例模式的简单实现方法
2016/06/10 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
禁止拷贝网页内容的js代码
2014/01/22 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
python实现大文件分割与合并
2019/07/22 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
Linux的主要特性
2014/10/06 面试题
《水乡歌》教学反思
2014/04/24 职场文书
政审证明材料
2015/06/19 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
2015年中秋节主持词
2015/07/30 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书