兼容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>

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",比如在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

3. 拓展:本地预览(fileReader)

fileReader就是html5为我们提供的读取文件的api。它的作用就是把文本流按指定格式读取到缓存,以供js调用。
参考资料:上传图片本地预览
通过fileReader的readAsDataURL方法,将文件读取为 DataURL,然后赋值给img的src,就大功告成啦。
DataURL有其固定的格式,如下:
data:[文件格式];base64,[文本流base64编码]。

img src的值为DataURL格式

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容