IE9上传图片 json下载问题

本文主要是介绍IE9上传图片 json下载问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这东西，找的烧脑壳呦~

IE9上传图片需要前端和后端配合，网上有很多方法，我这个是在github找的，地址放在下面，代码核心上传就是ajaxSubmit。

加一句，【json下载】问题我这里只会在上传图片之后，后端返回【application/json】才会被IE9拦截后下载。

以及，看到这篇文章的人，应该已经知道IE9上file对象以及常用的那一堆方法不能用的事情了，我就不赘述了……

github地址：https://violay33.github.io/yyy-upload/

一.下面是根据他的代码做出的一些调整：

1.这两upload是要与调接口时候用的参数保持一致

2.代码里【验证图片大小】这些都被我注释了，具体原因应该是IE或者IE9不支持某些方法

二.前端和后端需要做出什么调整

1.前端：

ajaxSubmit里面有一条dataType，前端在IE9下上传时需要选用【html】或者【text】，后端的响应头类型，我让后端设置的是【text/html】，后端代码看第2条

我的前端dataType为 text 和 html 返回值：没什么不同

ajaxSubmit代码：在yyy-upload.js里面，核心就是这个

tempForm.append('upload',opt.fileEle).ajaxSubmit({url: opts.url,type: "POST",timeout: 3000,dataType:"text",   // 是这里呦~success: function (data) {//将文件放回原位if (typeof opt.succCb !== 'undefined') {opt.succCb(data)}opt.fileEle.appendTo(opt.containerEle);tempForm.remove();},error: function (err) {if (typeof opt.failCb !== 'undefined') {opt.failCb(err)}opt.fileEle.appendTo(opt.containerEle);tempForm.remove();}
});

JQuery版本：

 <!-- jquery --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><!-- jquery.form.js --><script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>

我的demo代码：和github示例好像一样→_→。。。

<template><div><div class="yyy-upload-box"></div></div>
</template><script>
export default {data () {return {obj: null,  }},methods: {},mounted () {$('.yyy-upload-box').imgUpload({immediatelyUpload: true,url: '/common/api/v1/file/uploadIE',maxSize: 0,imgType: ['gif', 'jpeg', 'jpg', 'png', 'bmp'],allowDrag: true,succCb:(data) => {console.log('前端html',data)}});},
}
</script><style></style>

PS：这里我用的是vue-cli4.x的vue框架，github上面下载的js和css文件我是直接丢public里和jquery一起引入了

2.后端(java)：

其实我也看不懂java代码，但核心就是让java把上传图片接口的响应类型改成【text/html】，【text/plain】我就没试过了，但找资料看网上说这个也可以，不过懒得试了→_→。。。有一个能用就行

PS：文章来源找不到了，被我关标签页点x点的爽的时候顺手点掉了_(:з」∠)_，但总之就这一句，想办法让你后端加进去