基于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 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
js验证账户名是否重复
May 26 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
global.php
2006/12/09 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
ExtJs使用总结(非常详细)
2012/03/22 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
python从入门到精通(DAY 3)
2015/12/20 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python多进程实现文件下载传输功能
2018/07/28 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
合伙协议书范本
2014/04/21 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle