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 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
采用call方式实现js继承
May 20 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript - HTML的request类
2006/07/15 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
CSS3 display知识详解
2015/11/25 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
人力资源管理专业自荐书范文
2014/02/10 职场文书
家长会演讲稿
2014/04/26 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs