图片上传的血泪史

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片上传的血泪史相关的知识,希望对你有一定的参考价值。

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

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。

 

以上是关于图片上传的血泪史的主要内容,如果未能解决你的问题,请参考以下文章

如何上传图片到七牛云

使用 AFNetworking、ios 上传图片

Android - 应用程序启动时片段 onCreate 崩溃

手机safari图片上传竖变横处理

java Ftp上传创建多层文件的代码片段

根据图片的url地址下载图片到本地保存代码片段