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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
VUE动态生成word的实现
Jul 26 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
优化PHP程序的方法小结
2012/02/23 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
潜说js对象和数组
2011/05/25 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
微信小程序入门教程
2016/11/18 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
原生js实现分页效果
2020/09/23 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python中psutil的介绍与用法
2019/05/02 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
护士上岗前培训自我鉴定
2014/04/20 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang