兼容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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

ie9上传文件的更多相关文章

  1. jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹)

    第四弹的诞生完全不在自己最初的计划之中,是有个网友看了先前关于<ajaxfileupload.js系列>的文章后提出的问题,由于自己一直是用chrome浏览器去测试demo,完全忽略IE浏 ...

  2. 关于IE9中webdiriver使用autoit上传文件报错

    在ie9中, type="file"的元素是通过js打开的 webdirver结合autoit上传文件时,会报拒绝访问的错 sciTE编辑器中是这样写的: #include < ...

  3. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

  4. Ajax方式上传文件

    用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...

  5. html+css上传文件控件美化

    html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题【转】

    转自:http://www.iefans.net/ie-shangchuan-bendi-lujing-fakepath/ 在使用<input id="file_upl" t ...

  7. C# 结合html5 批量上传文件和图片预览

    html5 新特性 <input id="imgsf" type="file" name="imgsf" multiple /> ...

  8. jQuery统计上传文件的大小

    对于现代浏览器(支持html5)来说,在客户端统计上传文件的大小,可以通过$(selector)[0].files[0].size来实现.但在老版本的IE浏览器中,比如IE7,IE8或IE9,却不支持 ...

  9. js上传文件

    一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...

随机推荐

  1. git--创建空的分支

    背景:项目进行中,需要创建一个空分支.在Git中创建分支,是必须有一个父节点的,也就是说必须在已有的分支上来创建新的分支,如果你的工程已经进行了一段时间,这个时候是无法创建空分支的. 解决方法: 使用 ...

  2. 区块链入门(5)Truffle 项目实战,Solidity IDE, 智能合约部署

    在上一张我们学习了Truffle项目的创建,部署等相关内容,今天我们就来实战一下. 今天我们要做3件事: 1) 学习搭建一个Solidity IDE(Remix). 2) 使用这个Solidity I ...

  3. win7旗舰版64位GHOST版的,安装telnet客户端时,提示:出现错误。并非所有的功能被成功更改。

    win7旗舰版64位GHOST版的,安装telnet客户端时,提示:出现错误.并非所有的功能被成功更改. 从安装成功的电脑上拷贝ghost版本缺少的文件,然后再安装telnet客户端,我已打包 链接: ...

  4. Debian 9 Stretch国内常用镜像源

     随着Debian 9的普及,但由于伟大的墙的存在,那就有必要整理一下国内的镜像站点. 1.使用说明 一般情况下,修改/etc/apt/sources.list文件,将Debian的默认源地址改成新的 ...

  5. sublime安装PackageControl提示失败(被墙了)

    An error occurred installing Package Control 然后下面又说visit....某网址 如果弹出这个错误的话,就是被墙了.翻个墙或者改hosts就行了 如果是改 ...

  6. CentOS7+CDH5.14.0安装CDH错误排查:HBase服务出现 该运行状况测试不良,因为 Service Monitor 未找到活动 Master

    错误:HBase服务出现 该运行状况测试不良,因为 Service Monitor 未找到活动 Master 如果重启服务之后无法排除该问题,请执行如下操作(CM换成自己的版本号): rm -f /o ...

  7. Taro-ui TabBar组件使用路由跳转

    1. 安装taro-ui (此处使用cnpm) cnpm install taro-ui 2. 全局引入样式 app.scss sass :@import "~taro-ui/dist/st ...

  8. bootstrap table dataView展开行详情,p元素自动换行

    // bootstrap table 行详情展开,p元素自动换行1 .tableClass .detail-view p{ white-space: normal; }

  9. ASP.NET Core Web API 如何 数据分页 以及遇到'OFFSET' 附近有语法错误

    最近领导叫我做的一个B/S端的小项目,突发奇想想用到core web api 今天写数据分页的时候,就想着 用linq分页查询吧,直接上代码 _context.Skip(Size * (PageNum ...

  10. Python3 单下划线_双下划线__开头

    Python 中,下划线对解释器有特殊的含义,而且是内建标识符所使用的符号,使用时要多加留意. 在 Python3 的面向对象中,双下划线开头的变量和方法表名为私有变量和私有方法. __private ...