图片上传的血泪史

Posted 2020-07-25

最近在项目中涉及的图片上传内容,而且要求兼容低版本浏览器。磕磕绊绊碰到很多坑。记录一下心得。

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。