iframe跨域上传图片

最近几天一直在做上传图片的功能，需求是这样的，我有一个表单，要上传图片到一个单独做图片存储的服务器（这样做的道理想必大家都应该有所了解）。后台服务接口不支持get方式，只支持post方式。

方案一：用jquery的$.post异步提交，然后把返回来的值用jquery填充到隐藏域中。可是$.post不支持跨域。 jQuery.ajax()支持get方式的跨域，这其实是采用jsonp的方式来完成的。

方案二：在java后台模拟form表单post提交，用到apache HttpClient包，把文件流传给服务端。但是发现服务端不接收文件流。

方案三：利用iframe以及jquery进行表单post提交。代码如下：

 <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的这种妙用。