用iframe跨域上传图片，怎样接收返回的json数据

Question

用iframe跨域上传图片，怎样接收返回的json数据，目前有一个警告提示 Resource interpreted as Document but transferred with MIME type application/json: "http://up.qiniu.com/".

//构造一个隐藏的iframe，把表单放到iframe中提交，实现跨域post表单
function btnSubmit(){
//构造iframe
var iframe = document.createElement("iframe");
iframe.name = "ActionFrame";
iframe.id = "ActionFrame";
iframe.style="display:none"; //设置隐藏该iframe
document.body.appendChild(iframe);  //构造一个对象。插入页面中。

//开始提交
var MyForm = document.getElementById("upLoadPortrait");
MyForm.target = "ActionFrame"; //让表单在iframe中提交
MyForm.submit();//执行提交。
alert(document.getElementById('ActionFrame').contentWindow.document.toString());
}

Answer 1

返回的响应头不要设置成application/json，否则IE浏览器直接出问题。
看看这里http://blog.csdn.net/wangzuxi/article/details/43966357

Answer 2

http://up.qiniu.com/ 是支持 CORS 的，所以如果你只是在高级浏览器上执行代码，你可以用这个。

如果你要支持低级浏览器，那么你是没有办法直接跨域获取 JSON 数据的，最简单的做法是你在你的服务器上做一个代理，前端提交表单到自己的服务器，然后服务器代理发送到七牛云。

Answer 3

利用iframe提交做无刷新上传，要拿到返回的json数据需要iframe的域和父页面的在同一域下(主域名相同，二级域名不同也不可以）。
这个是大前提。
一种解决方法：
利用七牛的网页直传+上传后跳转，让iframe上传完成后跳转到父页面域下的一个接口上，再利用这个接口返回需要的json数据。
还是推荐用swfupload、plupload这样的第三方上传组件吧。。。灵活性更大，可定制性也更大。

Answer 4

话说我以前在用enyo框架的时候，也是和题主使用了相同的方法，通过iframe方式来实现跨域上传，并通过load事件来监听iframe获取返回的信息。不过正如题主所遇到的问题一样，iframe默认把所获得的数据当作html解析，遇到'Content-Type=application/json'时就会出现提示。但是有没有办法改变iframe默认的数据格式我就不清楚了。
在最近的一个小项目中我也用到了七牛的图床，不过我使用了html5中带来的新特性：File API来避免iframe带来的麻烦。

<input id="uploader" type="file" >

```javascript

$("#uploader").change(function(){ var files = this.files; var token = 'qiniu upload token'; var fd = new FormData();

fd.append('file', file);
fd.append('token',token);

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadFailed, false);
xhr.open('POST', postUrl);

xhr.send(fd);

}) function uploadProgress(event){ //... } function uploadFailed(event){ //... }

function uploadComplete(event){ //... } ``` 在html5中，可以直接访问input.files来获得input标签中的文件信息，并且FormData类可以自动帮你完成post from的构建，最后只需要在xhr中把FormData发送出去就行了.

以上的代码我是从现有项目中节选过来的，所以并没有经过测试，这里只是提供一个大概的思路。我的项目中使用的是angular.js和chrome浏览器，新版的firefox,opera都没问题。