iframe跨域上传图片
最近几天一直在做上传图片的功能,需求是这样的,我有一个表单,要上传图片到一个单独做图片存储的服务器(这样做的道理想必大家都应该有所了解)。后台服务接口不支持get方式,只支持post方式。
方案一:用jquery的$.post异步提交,然后把返回来的值用jquery填充到隐藏域中。可是$.post不支持跨域。 jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的。
方案二:在java后台模拟form表单post提交,用到apache HttpClient包,把文件流传给服务端。但是发现服务端不接收文件流。
方案三:利用iframe以及jquery进行表单post提交。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></ script > < script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></ script > < script type="text/javascript"> $(document).ready(function() { $("#file").bind("change", function() {//对文件输入框绑定change事件 $("#form").submit(); }); }) </ script > < body > < form action="跨域名接口" id="form" name="form" enctype="multipart/form-data" method="post" target="hidden_frame"> < span > < input type="file" id="file" name="file"/> </ span > < iframe name="hidden_frame" id="hidden_frame" style="display:none"></ iframe > </ form > </ body > |
form的target要指定iframe的名称,这样就看不到页面的跳转了 。
target的几个属性值 :
值 | 描述 |
---|---|
_blank | 在新窗口中打开。 |
_self | 默认。在相同的框架中打开。 |
_parent | 在父框架集中打开。 |
_top | 在整个窗口中打开。 |
framename | 在指定的框架中打开。 |
我们可以看到form表单提交后页面没有做跳转,并且返回值,也在隐藏的iframe中展现。正体现了target的这种妙用。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步