标签：
最近在项目中涉及的图片上传内容,而且要求兼容低版本浏览器。磕磕绊绊碰到很多坑。记录一下心得。
ie9之前低版本浏览器上传图片的方式：
1.隐藏iframe中插入表单。
利用表单设置multi-part传输方式，把input[type=file]的文件发送到服务器，代码如下：
//构造一个隐藏的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("myform"); MyForm.target = "ActionFrame"; //让表单在iframe中提交 MyForm.submit();//执行提交。
//这里可以拿到服务器返回的数据 console.log(document.getElementById(‘ActionFrame‘).contentWindow.document.toString()); }
但是这种方法有深坑：
1）跨域上传的时候，可以上传成功，但是通过获取iframe的内容是拿不到服务器返回的信息的(同源策略)。我们可以用jsonp解决它；
2）ie9之前的浏览器不兼容content-type为application/json的数据返回（这是当下大多数接口默认返回的类型），所以就会看到浏览器弹出了一个json文件，可以让你的接口返回content-type:‘text/html‘或text/plain来搞定它。
2.flash组件上传
flash可以绕过xhr直接发送post请求并可以支持传文件。flash还可以跟js做双向交互。flash似乎无所不能，但是使用比较繁琐，通常使用已有的flash上传组件。
高级浏览器的上传方式(blob)
1. 使用formdata、file对象。
var file = this.files[0]; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // do as you like } } var fd = new FormData(); fd.append(‘media‘, file); xhr.open(‘post‘, ‘/api/content/file/upload‘); xhr.send(fd);
2.使用base64。
标签：
原文地址：http://www.cnblogs.com/carlsirce/p/5589378.html
