ie9上传文件

兼容ie9文件上传，解决ie9下提示下载或保存

如果不考虑ie9兼容性，实现【上传图片】大致的思路如下：

1. 由于公司是将所有上传的图片都放到【代理服务器】里。所以【上传图片】其实是上传到【代理服务器】。可以通过ajax，通过FormData将图片上传到【代理服务器】。
2. 从【代理服务器】拿到的回调里，有压缩过的图片的url，将这个url赋值给DOM里图片img的src就行了。由于我们的项目是用的vue，直接绑定：src就行了。
3. 上传图片到【代理服务器】完成后，需要将url等相关数据（我们的项目后端需要一个pid，来实现用户下次访问时，后端从代理服务器根据这个pid来获取相应图片】），通过ajax发给后端（我们公司的服务器）。

思路很简单，而且核心关键其实就是第1点，第2，3只是简单的DOM操作和ajax交换数据。接下来就只关注第1点的具体实现。

1. 通过formData，结合html5的input type=file来实现上传

<input name="file" type="file" @change="update" accept="image/x-png, image/jpg, image/jpeg">

对应的，Vue的methods里，update方法如下：

update(e) {

  let file = e.target.files[0]; //input提供的API，如果需要过滤图片尺寸，也可以在e.target.files[0]里拿到相应数据。

  let param = new FormData(); //通过FormData来将图片信息发送给服务器；FormData是html5的私有对象。

  param.append('file', file, file.name);

/* 接下来，就是通过ajax，发送form数据到服务器，我们公司用的jQuery，比较普遍的应该是axios吧 */

  $.ajax({

    url: '/image/upload',

    type: 'POST',

    data: param, //保证data格式为FormData

    processData: false, //必须false才会自动加上正确的Content-Type

    contentType: false //必须false才会避开jQuery对 formdata 的默认处理

  }).done(function(res) {

  // 回调

  })

}

然后，在回调里，给DOM里的图片src赋值就行了。

当然，如果不兼容ie9，现在这个方案就行了。

在ie9下，不支持FormData。所以在ie9下，只能通过form表单形式实现图片上传。

2. ie9下通过form表单实现文件上传

<form id="myForm" method="post" action="/image/ieupload" enctype="multipart/form-data">

  <input name="file" type="file" @change="update" accept="image/x-png, image/jpg, image/jpeg">

  <input id="submit" type="submit" style="display:none">

</form>

ie9不支持headers上传参数，可以采用参数拼接在接口上

form里，enctype必须为mulitpart/form-data，表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form- data，才能完整的传递文件数据。

同时要加上input type="submit"，只有点击（或者trigger click）这个按钮，才会将数据发送到服务器。

这样，在上面的update方法里，就需要加一层判断，如果不是ie9（或者是浏览器不支持formData），就通过formData结合ajax实现上传图片。通过formData的好处是不用在DOM里写form，（form表单提交，一般的服务器处理方式是重定向），只通过ajax跟后端服务器交换数据可以让接口更加统一。而如果是ie9，则必须要通过form表单提交，在update方法里，通过trigger #submit元素的click事件来完成表单提交。

但是，如果服务器返回的是json，并不能拿到服务器返回的数据，而是直接提示下载或打开：

 

ie9下，不能拿到回调

 

之所以ie9下提示打开或者保持，是因为：
ie无法解析回调里的json数据，就是说如果服务器返回json数据，ie会把它当做文件来处理，显示打开或保存。

解决方法如下：
在后端返回的时候自定义contype-type为"text/html"或者"text/plain"，比如在node中这样写res.setHeader('Content-Type', 'text/html')。

参考资料：文件上传返回JSON数据，在IE下提示下载文件

这样改完之后，会发现，虽然现在不提示下载文件了，可是会直接跳转到新页面。

 

ie9下会直接跳转

在ajax未诞生前，都是用iframe来实现无刷新的效果。为了避免跳转到新页面，需要手动指定跳转的页面为一个iframe。然后取到iframe里的回调内容后，将相应内容从iframe里取出来使用。

参考资料：通过iframe防止form表单提交时跳转页面

另外，由于因为file是Readonly，如果用户上传的图片不符合要求，想清空value，只能用新的file替换之前的file。
参考资料：http://www.cnblogs.com/nsky/archive/2012/12/28/2836578.html

 

作者：kakaguo
链接：https://www.jianshu.com/p/b2ab1eb2452e
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。