jQuery-File-Upload兼容IE8的问题：data.submit()没有发送请求

这段代码来自我的提问以及后来的回答。
https://segmentfault.com/q/1010000009635544

先给出此问题相关的代码:下面的代码，我已经成功兼容了IE9+,但是没能成功兼容IE8

先给出此问题相关的代码:
下面的代码，我已经成功兼容了IE9+,但是没能成功IE8，

这段的代码不需要关注。

 $("#file-upload").fileupload({           url: "/api/org/importOrg",add: function(e, data) {var file = data.files[0];$("#fileInput").val(file.name);$("#importSuccess").unbind().bind('click', function() {if ($("#fileInput").val() === "") {Messenger().post({message: "请先上传文件！",type: 'info',showCloseButton: true});return;}if (browser == "Microsoft Internet Explorer" && (trim_Version == "MSIE7.0" )) {Messenger().post({message: '浏览器版本过老，不支持导入功能',type: 'info',showCloseButton: true});return;} else if (!/.xls$|.xlsx$/.test(file.name)) {Messenger().post({message: '请上传以.xls/.xlsx为后缀名的正确Excel模版文件',type: 'info',showCloseButton: true});return;} else if (file.size >= 10485760) {//上传文件大小不能超过10MbMessenger().post({message: '上传的文件大小不能超过10Mb',type: 'info',showCloseButton: true});return;}$('#importSuccess').showLoading({'overlayWidth': $('#importSuccess').innerWidth(),'overlayHeight': $('#importSuccess').innerHeight()});//var pNode = pNodeSelectTree.getId();//$("#file-upload").fileupload({formData: {name: $("#fileInput").val(), //type:$("[name=userType]:checked").val() }});$("#file-upload").fileupload({formData: {name: $("#fileInput").val()}});console.log('before submit:'+ $("#fileInput").val());//before submit:组织导入模板.xls//$("#file-upload").fileupload({url:"/api/org/"+pNode[0]+"/importOrg"});data.submit();console.log("after submit");//after submit});},done: function(e, rep) {console.log("done");//没有触发fail，没触发done回掉var myResult=JSON.parse(rep.result);//后端返回字符串，解析成JSON对象，请求的content-type应该为text/plain,避免IE9下返回application/json提示下载，从而兼容IE9//  myResult={"failed":1,"succeed":10,"fails":[{"line":15,"name":"的萨芬","orgName":"组织","mobile":1352222222,"error":"出错啦!!!"},{"line":15,"name":"的萨芬","orgName":"组织","mobile":1352222222,"error":"出错啦!!!"},{"line":15,"name":"的萨芬","orgName":"组织","mobile":1352222222,"error":"出错啦!!!"}]};$('#importSuccess').hideLoading();$("#fileInput").val('');if (myResult.failed == 0) {new Modal({icon: "success",title: "导入成功",content: "成功导入" + myResult.succeed + "条数据",isConfirm: false}).show(function() {});} else {$('#importErrorModal').html(importErrorModal(myResult));new Modal('#importErrorModal').show();$('#importErrorModal td>div').each(function(){this.scrollWidth > this.offsetWidth && $(this).tooltip();});$('#importErrorModal .modal-header').moveAnimate({modalHeaders:'#importErrorModal .modal-header'});}},fail: function() {console.log("fail");//没有打印，也就是说没回调fail$('#importSuccess').hideLoading();$("#fileInput").val('');}});

我遇到的问题不是所谓的返回JSON数据，IE浏览器提示下载的问题，这个问题我已经解决了。
现在的问题是，在IE8下，此段程序无法回调done和fail函数，但是在IE9+浏览器和其他主流浏览器中是可行的。

  console.log('before submit:'+ $("#fileInput").val());//before submit:组织导入模板.xls//$("#file-upload").fileupload({url:"/api/org/"+pNode[0]+"/importOrg"});data.submit();console.log("after submit");//after submit

根据上面那段程序的打印结果，说明add函数是成功执行的。
我也监控了network的通信，只有loading.gif这个表明正在加载的通信，没有其他相关的请求&&回复。

这也佐证了done和fail函数没有被回调，那么问题是什么呢？

我的回答：

IE9的兼容问题我已经在昨天尝试了一天被我解决，但是之后IE8的兼容问题一直没有被解决，虽然我也花了近一天的时间，在stack overflow上搜索相关问题，但是没有什么收获。

我是题主。我在这个问题上花了两个白天的时间，终于解决了这个问题。
之所以能解决这个问题，是因为我重新检查了前人写的代码逻辑。这个问题其实和HTML代码紧密相关，我之前只注意JS代码。
- HTML代码

<button class="btn btn-icon btn-blue" style="width:90px;height:32px" onclick="$(this).next().click()"><span class="icon-zcy icon-shangchuan mr" style="height:20px"></span>上传
</button>
<input type="file" name="files" style="display:none" class="btn-upload" id="file-upload" >

我们可以看到，这个其实是通过click触发click。
这个是很常见的手法，因为很难看，也不好定制（至少我不知道如何定制它的CSS）。所以通过隐藏input，通过button调用input成为大多数人的选择。
但是IE8出于安全性，不允许这么做，所以input看似被调用，但是没有获取到data, 下面这段英文来自微软关于IE的文档：

IE doesn’t allow manipulation of the type=”file” input element from javascript due to security reasons. Setting the filename or invoking a click event to show the browser dialog will result in an “Access is denied” error on the form submit.

这样如何保证安全性，我就不知道了。

所以为了避免这个限制,对HTML代码进行改动：看似在点击button,实则在点击
input

<div class="uploadFile"><input type="text" class="input input-medium" id="fileInput">                       <span><a href="javascript:void(0)" class="btn btn-icon btn-blue"  > <span class="icon-zcy icon-shangchuan mr" style="height:20px"></span>上传</a><input type="file" name="files" class="btn-upload" id="file-upload" ></span>
</div>

SASS

.uploadFile{span{position: relative;display: inline-block;}#file-upload { // 设置占据空间为0，看似点击button,实则在点击file-upload,从而避开IE8处于安全限制禁止间接点击input type=file的bugposition: absolute;width: 100%;height: 100%;//和父元素同高宽top: 0;right: 0;opacity: 0;filter: alpha(opacity=0);}//解决此bug的方法详见http://wenzhixin.net.cn/2014/07/30/ie8_file_problem}

这是我看了这篇博客：http://wenzhixin.net.cn/2014/07/30/ie8_file_problem 后所做的尝试，然后works

我的感想：通过调试确定问题的根源，再根据问题在谷歌上搜答案。

jQuery-File-Upload兼容IE8的问题：data.submit()没有发送请求相关推荐

jquery file upload ajax上传图片简单使用
为什么80%的码农都做不了架构师?>>> 最近要在做后台的图片上传,要用ajax异步上传图片,原生js实现很难 jquery file upload 插件很轻松就完成了 < ...
定制jQuery File Upload为微博式单文件上传
原文链接:http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload jQuery File Upload是一个 ...
jQuery File Upload
jQuery File Upload的最简模型 jQuery File Upload包含了一堆文件,首先需要弄清楚的是最核心的部分是哪些,根据官方的例子可以知道,一个最简单的jQuery File U ...
jQuery File Upload文件上传
最近在写单文件上传,用jQuery File Upload踩了好多坑,但终于实现了单文件,通过按钮提交. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
php上传漏洞绕过gd库,jQuery File Upload任意文件上传漏洞
事件背景 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个JavaScript代码库(或JavaScript框架).jQuery File Upload一个jQ ...
jquery file upload 后台收到的文件名中文乱码， filename中文乱码
在jQuery File Upload.js文件里,在以下这个js中有个成员叫做 _initXHRData, 是一个function, 在这个function的最后部分有一个if-else分支,如下: ...
jquery file upload 与 uploadify
对于图片上传来说有各种js库来帮助实现此功能,常用的包括uploadify和jquery的file upload这两个库. 1.uploadify实现起来比较简单 http://www.uploadi ...
jquery file upload 限制上传文件的格式、大小或图片尺寸
限制文件格式.大小 $("#head").fileupload({url: "/front/user/uploadHead",dataType: 'json', ...
jQuery弹幕（兼容IE8）
超简单的jQuery弹幕,支持IE8!!! <!DOCTYPE html> <html><head><meta charset="UTF-8&quo ...
简单的python案例_基于python的最简单jQuery File Upload示例
https://github.c➜ flask-demo tree . ├── app.py ├── static │ ├── 123.txt │ └── file-upload │ ├── angu ...

jQuery-File-Upload兼容IE8的问题：data.submit()没有发送请求

我的回答：

jQuery-File-Upload兼容IE8的问题：data.submit()没有发送请求相关推荐

最新文章

热门文章