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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
javascript+css实现进度条效果
Mar 25 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
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
Python的多态性实例分析
2015/07/07 Python
python 网络爬虫初级实现代码
2016/02/27 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
python opencv进行图像拼接
2020/03/27 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
Linux文件系统类型
2012/02/15 面试题
租赁意向书范本
2014/04/01 职场文书
房产买卖委托公证书
2014/04/04 职场文书
节能环保标语
2014/06/12 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2014年转正工作总结
2014/11/08 职场文书
运动会200米广播稿
2015/08/19 职场文书
python 逐步回归算法
2021/04/06 Python
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android