解决jQuery-File-Upload在IE9下的问题

mj 发布于2019-08-20 18:53 / 2065人阅读

摘要：最近编写了一个上传文件的功能，支持所以选用了。但是在测试时，产生了麻烦的问题，在这里记录一下。头文件问题，股务端接口要返回文件。在下面，会弹出下载的问题。代码如下上面是我下载的文件列表。其次，是在配置方面上面主要是在配置方面。

最近编写了一个上传文件的功能，支持ie9+.所以选用了 jQuery-File-Upload。但是在IE9测试时，产生了麻烦的问题，在这里记录一下。

头文件问题，

股务端接口要返回text/html文件。因为ie9不认识application/json格式的。在IE9下面，会弹出下载的问题。

在我修改过程中，后端同学说改了，然后我很信任它。然后改过后，还是有下载的问题。不知道所措，最后发现是后端没有修改成功。。。

JS代码设置部分。

首先，在文件的加载上。代码如下

const fileList = ((pathFix) => {return [
        `${pathFix}/jqueryuploader/vendor/jquery.ui.widget.js`,
        `${pathFix}/jqueryuploader/jquery.fileupload.js`,
        ...(laterIE ? [`${pathFix}/jqueryuploader/cors/jquery.xdr-transport.js`]
        : []),
        `${pathFix}/jqueryuploader/jquery.iframe-transport.js`,
        ];
    })("/static/static");

上面是我下载的文件列表。在ie9下面，多加载了一个jquery.xdr-transport.js文件。

其次，是在配置方面

$(fupload).fileupload({
            url: server.dataPoiUpload,
            dataType: "json",
            autoUpload: true,
            formData: {geotable_id: geotableId, sn: mStore.getSN(), user: mStore.getUsername()},
            sequentialUploads: true,
            done: function(e, cdata) {
                var result = cdata.result;
                const data = ((rdata) => {
                    return typeof rdata === "object" ? rdata : JSON.parse(rdata);
                })(result);
                
            },
            progressall: function(e, data) {
                console.log("update progressall");
                var progress = parseInt(data.loaded / data.total * 100, 10);
                self.setState({
                    "progress": progress
                });
                
            },
            change: function() {
                self.setState({
                    status: "updating",
                    uploadBtn: false
                })
                console.log("upload change");
            },
            success: function(cdata, status, object) {
                const data = ((cd) => {
                    return typeof cd === "object" ? cd : JSON.parse(cd);
                })(cdata);
                
            }
        }).error(function() {
            console.log(arguments, "error");
        });

上面主要是在配置方面。主要注意几点：1，设置dataType. 2, success返回值时，chrome与ie返回值格式不一样。这里做一判断

以上是主要的关键点。留做总结，希望能帮助也在使用此组件的人

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84833.html

IE9下的跨域问题小总结

摘要：由于浏览器同源策略，凡是发送请求的协议域名端口三者之间任意一与当前页面地址不同即为跨域最近项目要兼容，找了一些资料，实践了一下，现在总结一下，避免以后踩坑。解决方案，微软在和下给我们提供了来进行解决跨域问题，官方的文档可以在这里看到。由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域最近项目要兼容IE9，找了一些资料，实践了一下，现在总...

Jokcy 2019-08-21 11:38 评论0 收藏0
Vue 兼容 ie9 的全面解决方案

摘要：本文将针对使用生态开发完成的网站，以版本为基础兼容目标，实现全功能正常使用的全面兼容解决方案。这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。此外，使用这个，一旦页面不处于浏览器的当前标签，就会自动停止刷新。前言背景情况 vue - 2.5.11 vue-cli 使用模板 webpack-simple http请求：axios Vue 官方对于 ie 浏览器版本兼容情...

codeKK 2019-08-22 18:07 评论0 收藏0
【面试系列】之四：关于原生dom操作

摘要：指向后一个同辈元素的元素版。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。生成结束秒钟后，将个颠倒过来，内容也就变成了。之四：关于原生dom操作下周被内推了百度糯米的面试，决定趁这个周末恶补下原生的js基础，感觉自己被jQuery惯坏了吧！前两天听首页部同组的大牛师兄说：其实还是js基础重要，不要盲目追求新技术，基础练好了就像把自己的内功修炼好，内功扎实才能修炼好武功秘...

hatlonely 2019-08-20 10:23 评论0 收藏0
解决360浏览器兼容模式的页面显示问题

摘要：以的几款浏览器为例，我们优先通过内核渲染主流的网站，只有小量的网站通过内核渲染，以保证页面兼容。尽管我们努力通过用户反馈代码标签智能判断技术提高浏览器的自动切核准确率。目前该功能已经在所有的安全浏览器实现。原文地址（我比较纳闷，360的兼容模式这么狗屎，为什么还有存在的必要性……）由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。...

malakashi 2019-08-01 14:45 评论0 收藏0
前端面试资源（二）

摘要：语义化语义化是指通过标记表示页面包含的信息，包含了标签的语义化和命名的语义化。兼容性为，为鼠标移入状态的元素，兼容性标签，所有元素选择不符合的元素。解决办法使用控制间距。 web语义化 web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构css命名的语义化是...

APICloud 2019-08-30 14:11 评论0 收藏0