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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
js轮播图代码分享
Jul 14 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
用javascript制作qq注册动态页面
Apr 14 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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
详解python进行mp3格式判断
2016/12/23 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
QML使用Python的函数过程解析
2019/09/26 Python
python实现随机加减法生成器
2020/02/24 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
django rest framework 自定义返回方式
2020/07/12 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
委托公证书
2014/04/08 职场文书
对孩子的寄语
2014/04/09 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
高中运动会前导词
2015/07/20 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android