jQuery.form插件的使用及跨域异步上传文件


Posted in Javascript onApril 27, 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.form插件的使用及跨域异步上传文件

以上所述是小编给大家介绍的基于jQuery.form插件实现jQuery跨域异步上传文件的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
vue组件的写法汇总
Apr 12 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
js实现纯前端的图片预览
Apr 27 #Javascript
简介BootStrap model弹出框的使用
Apr 27 #Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 #Javascript
javascript实现延时显示提示框特效代码
Apr 27 #Javascript
JS延时器提示框的应用实例代码解析
Apr 27 #Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 #Javascript
requireJS使用指南
Apr 27 #Javascript
You might like
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
jQuery 白痴级入门教程
2009/11/11 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python实现归并排序算法
2018/11/22 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
学习雷锋标语
2014/06/25 职场文书
师德师风整改措施
2014/10/24 职场文书
售后服务承诺函格式
2015/01/21 职场文书
建议书格式
2015/02/04 职场文书
财务稽核岗位职责
2015/04/13 职场文书
教师思想工作总结2015
2015/05/13 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
MySQL 原理与优化之Update 优化
2022/08/14 MySQL