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 闭包深入理解(closure)
May 27 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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中使用Oracle数据库(4)
2006/10/09 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
对Python中range()函数和list的比较
2018/04/19 Python
python实现机器学习之多元线性回归
2018/09/06 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
药剂专业自荐信范文
2014/04/16 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
精神病医院见习报告
2014/11/03 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
原告离婚代理词
2015/05/23 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
JS实现扫雷项目总结
2021/05/19 Javascript
python 经纬度求两点距离、三点面积操作
2021/06/03 Python