首页 > 用iframe跨域上传图片,怎样接收返回的json数据

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

用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());
}

话说我以前在用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都没问题。


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


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


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

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

【热门文章】
【热门文章】