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 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
Angular 多模块项目构建过程
Feb 13 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中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
javascript 二进制运算技巧解析
2012/11/27 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
js实现小星星游戏
2020/03/23 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
pygame播放音乐的方法
2015/05/19 Python
python 网络爬虫初级实现代码
2016/02/27 Python
python算法表示概念扫盲教程
2017/04/13 Python
python数据结构之列表和元组的详解
2017/09/23 Python
mac系统安装Python3初体验
2018/01/02 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python中交换两个元素的实现方法
2018/06/29 Python
jupyter 导入csv文件方式
2020/04/21 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
python实现图片转字符画
2021/02/19 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
神龙架导游词
2015/02/11 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫