基于Jquery插件实现跨域异步文件上传功能

先解释清楚。

我们将Jquery.form插件用于这个跨域异步上传功能，这在异步表单中非常有效，我们将跨域向HTTP响应头添加access-control-allow-方法。当然，这个头标只有IE10、火狐和谷歌支持。对于IE10以下的浏览器，我们不能用这个方法。我们需要改变我们的思维来做到这一点，并让服务器将其重写到我们的客户端。

再次工作。

1 jquery的使用。形式。

form method=' post ' action=' http://127 . 0 . 0 . 1:801/Home/UploadResult ' enctype=' multipart/form-data ' id=' form 1 '输入名称=' qdctvfile ' id=' qdctvfile11 '类型=' file ' onchange=' eventStart()'/form script类型='text/javascript' $('#form1 ')。Ajax form({ BeforeSerialize : function(){ var file path=$(' # qdctvfile 11 ')。val()var ext start=file path . LastIndex of(' . ');var ext=file path . substring(ext start，filepath.length)。toUpperCase()；if (ext！='.巴布亚新几内亚文字母！='.jpg》){ alert('图片仅支持png png，JPG格式')；$('#qdctvfile11 ')。val(“”)；返回false} }，success:函数(数据){ alert(数据)；} });函数eventStart(obj) { $('#form1 ')。submit()；}注意代码中的eventStart方法指的是选择文件后自动提交表单，而ajaxForm则表示提交表单是异常方式，成功回调方法指的是异步返回表单地址的返回值。

2跨域初步实现。

为了解决域访问，我们可以在服务器的响应头中添加两个特性，访问控制允许源和访问控制允许方法。IE10以下的浏览器不支持这些功能，很郁闷。

///summary////MVC模式下的跨域访问////summary公共类MvcCorsAttribute : ActionFilterAttribute { public override void on actionexecuting(actionexecuting context filterContext){ dictionary string，string headers=new dictionary string，string()；标题。添加('访问控制-允许-来源'，' *)；标题。添加('访问控制允许方法'，' *)；foreach(标题中的var项。键){ filterContext。request context . httpcontext . response . headers . add(item，headers[item])；}基地。操作执行(过滤器上下文)；}}注意，在生产环境中，我们的访问控制-允许-起源应该指定一个合法的域名，而*表示所有网站都开放访问，这是很危险的。

3.解决下面IE10不能跨域的问题。

关于IE浏览器我真的不能说什么。虽然我很喜欢微软的东西，但是对于IE我只能是NO。我真的不想说太多。先来看看IE中跨域上传的解决方案：客户端不直接返回数据，而是将回调地址重写给客户端，回调像ajaxForm方法一样返回最终数据，从而解决了直接跨域的问题。

///summary////第三方的服务器/////summary//param name=' name '/param////returns/returns[http post]public action result upload result()。{字符串数据='{ '代码' :'OK '，' thumpImgUrl ' : ' http://127 . 0 . 0 . 1/images/1 . jpg ' } '；返回重定向(' http://localhost :9497/Home/UploadCallback？data=' data)；}///summary////可能被服务器调用////summary////returns/returns公共动作结果上传回调(字符串数据){return content(数据)；}有时候，当我们在思考一个问题的解决方案时，如果我们不能一路走下去，我们可以改变思维，我们可能会有意想不到的收获！

有人问是否可以使用POST在服务器和客户端之间传输数据。大叔说：不是，因为POST提交给客户端后，客户端处理，然后把结果返回给服务器，最后服务器把结果返回给ajaxform，一开始还是跨域的问题，哈哈！

哈哈，怎么样，很有意思！

更多精彩内容，请点击《jQuery上传操作汇总》深入学习研究。

这就是本文的全部内容。希望对大家的学习有帮助。感谢阅读！