javascriptajax异步跨域上传文件提交怎么跨域

来源：蜘蛛抓取(WebSpider) 时间：2016-09-17 08:44 标签： javascript 跨域请求
异步跨域提交form表单
来源：博客园
分两步提交页面用户输入的数据：第一步，利用form上传文件和一部分数据，第二步，上传文件成功得到文件id，再一次连同文件id和页面其他信息一同提交后台（也就是先上传一个文件，然后再利用文件id绑定到具体的“用户”上）。 首先form应该这样写
再创建一个隐藏的iframe在此就叫iframe1吧 以上form中的属性都必须有，其中enctype是form上传文件是的格式，target的值就是隐藏iframe的name属性的值。直接submit就可以提交form表单，此时后台返回的数据会在这个隐藏的iframe1中，此时问题来了，文件上传成功后后台返回的文件id是在iframe1中的 ，然而iframe1和主页面是不同域下的所以就牵扯到了跨域问题。 解决跨域问题的办法就是在首先写好一个中间页面tem.html，此中间页面就是完成文件和具体“用户”绑定操作（提交相关数据给后台）。将这个中间页面放在和iframe1同一个域下。 tem.html中主要是 var body = parent.window.patchIframe.document. 来获得iframe1中的内容，具体写法视情况而定，此时就可以在tem.html中得到文件的id。 用js动态生成一个隐藏的iframe2，并在iframe2中加载这个中间页面tem.html，请求tem.html时将需要和文件id绑定的“用户数据拼到url中”。这一步主要就是访问tem.html让他运行读取，此时tem.html中就可以得到具体“用户”的数据，也能得到文件id,然后直接发给指定的接口。执行的此其实异步提交form已经成功了，但是主页面是没有反应的，用户体验不好。 最有一步就是iframe2和主页面之间的通信，告诉主页面操作成功。使用到的办法就是postMessage方法，详见/dolphinX/p/3464056.html 主页面得到数据就可以做用户友好的反馈。
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&jquery下异步提交表单 异步跨域提交表单
字体：[ ] 类型：转载 时间：
基于jquery的实现异步跨域提交表单的实现代码，需要的朋友可以参考下。
1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数。 使用 jQuery 异步提交表单代码：
代码如下: &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&无标题页&/title& &/head& &script src="js/jquery-1.4.2.js"&&/script& &script& jQuery(function($) { // 使用 jQuery 异步提交表单 $('#f1').submit(function() { $.ajax({ url: 'ta.aspx', data: $('#f1').serialize(), type: "post", cache : false, success: function(data) {alert(data);} });
}); }); &/script& &body& &form id="f1" name="f1"& &input name="a1" /& &input name="a2" /& &input id="File1" type="file" name="File1"/& &input id="Submit1" type="submit" value="submit" /& &/form& &/body& &/html&
如何异步跨域提交表单呢? 1.利用script 的跨域访问特性，结合form表单的数据格式化，所以只能采用get方式提交,为了安全，浏览器是不支持post跨域提交的。 2.采用JSONP跨域提交表单是比较好的解决方案。 3.也可以动态程序做一代理。用代理中转跨域请求。 使用 jQuery 异步跨域提交表单代码：
代码如下: &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&无标题页&/title& &/head& &script src="js/jquery-1.4.2.js"&&/script& &script& jQuery(function($) { // 使用 jQuery 异步跨域提交表单 $('#f1').submit(function() { $.getJSON("ta.aspx?"+$('#f1').serialize()+"&jsoncallback=?", function(data) { alert(data); });
}); }); &/script& &body& &form id="f1" name="f1"& &input name="a1" /& &input name="a2" /& &input id="File1" type="file" name="File1"/& &input id="Submit1" type="submit" value="submit" /& &/form& &/body& &/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具

我要回帖

更多关于 javascript 跨域请求 的文章

 

随机推荐