创建在IE中工作的文件上传 [英] create file upload that work in IE

问题描述

我想写一个文件上传脚本，在IE中工作，但我写的两种类型的代码在IE中有问题。

请帮忙。你怎么能写一个文件上传脚本，在IE浏览器工作？

类型1

问题不支持文件Api In IE浏览器（诀窍是不使用它？）

 <！DOCTYPE html> 
 
< html> 
< head runat =server> 
< title>< / title> 
< script src =Scripts / jquery-1.6.2.jstype =text / javascript>< / script> 
< script type =text / javascript> 
函数updateSize（）{
 var nBytes = 0; 
 var nFiles = 0; 
 oFiles = document.getElementById（uploadInput）。files; 
 nFiles = oFiles.length; 
 for（var nFileId = 0; nFileId< nFiles; nFileId ++）{
 nBytes + = oFiles [nFileId] .size; 
} 
 var sOutput = nBytes +bytes; 
 //可选代码为多元逼近
（var aMultiples = [KiB，MiB，GiB，TiB，PiB，EiB，ZiB， （nMultiple ++）{
 sOutput = nApprox.toFixed（3）++ aMultiples [nMultiple] +（（nBytes）/ 1024; nApprox = nBytes / 1024; nApprox> + nBytes +字节）; 
} 
 document.getElementById（fileNum）。innerHTML = nFiles; 
 document.getElementById（fileSize）。innerHTML = sOutput; 
} 
 //可选代码结束
< / script> 
< / head> 
< body> 
< form id =form1runat =server> 
< p>< input id =uploadInputtype =filename =myFilesonchange =updateSize（）;多个/>选定的档案：< span id =fileNum> 0< / span>;总大小：< span id =fileSize> 0< / span>< / p> 
< p>< input type =submitvalue =发送文件>< / p> 
< / form> 
< / body> 
< / html> 
  

类型2

问题不支持文档。 getElementById（'fileToUpload'） .files [0] （是不是获取文件[0]的诀窍？）

 < script src =Scripts / jquery-1.4.1.jstype =text / javascript>< / script> 
< script type =text / javascript> 
函数fileSelected（）{
 var file = document.getElementById（'fileToUpload'）。files [0]; 
 if（file）{
 var fileSize = 0; （file.size> 1024 * 1024）
 fileSize =（Math.round（file.size * 100 /（1024 * 1024））/ 100）.toString（）+'MB'; 
 else 
 fileSize =（Math.round（file.size * 100/1024）/ 100）.toString（）+'KB'; 
 
 document.getElementById（'fileName'）。innerHTML ='Name：'+ file.name; 
 document.getElementById（'fileSize'）。innerHTML ='Size：'+ fileSize; 
 document.getElementById（'fileType'）。innerHTML ='Type：'+ file.type; 
 
 
 
 function uploadFile（）{
 var fd = new FormData（）; 
 fd.append（fileToUpload，document.getElementById（'fileToUpload'）。files [0]）; 
 var xhr = new XMLHttpRequest（）; 
 xhr.upload.addEventListener（progress，uploadProgress，false）; 
 xhr.addEventListener（load，uploadComplete，false）; 
 xhr.addEventListener（error，uploadFailed，false）; 
 xhr.addEventListener（abort，uploadCanceled，false）; 
 $ .post（UploadHandler.ashx）; 
 //xhr.open(\"POST，UploadHandler.ashx）; 
 xhr.send（fd）; 
 
 
函数uploadProgress（evt）{
 if（evt.lengthComputable）{
 var percentComplete = Math.round（evt.loaded * 100 / evt.total ）; 
 document.getElementById（'progressNumber'）。innerHTML = percentComplete.toString（）+'％'; 
 document.getElementById（'prog'）。value = percentComplete; 
 
 else {
 document.getElementById（'progressNumber'）。innerHTML ='无法计算'; 
 
 
 
 function uploadComplete（evt）{
 / *当服务器发送回应时引发此事件* / 
 alert（evt .target.responseText）; 
 
 
 function uploadFailed（evt）{
 alert（试图上传文件时出现错误。 
 
 
 function uploadCanceled（evt）{
 alert（上传已被用户取消或浏览器断开连接。 
} 
< / script> 
 
< / head> 
< body> 
< form id =form1> 
< div> 
< label for =fileToUpload> 
选择要上传的文件< / label> 
< input type =filename =fileToUpload []id =fileToUploadonchange =fileSelected（）; /> 
< / div> 
< div id =fileName> 
< / div> 
< div id =fileSize> 
< / div> 
< div id =fileType> 
< / div> 
< div> 
< input type =buttononclick =uploadFile（）value =上传/> 
< / div> 
< div id =progressNumber> 
< / div> 
< progress id =progvalue =0max =100.0>< / progress> 
< / form> 
< / body> 
  

请帮忙：（

解决方法

除非使用IE10或其他现代浏览器，否则不能使用这些函数。早期版本的Internet Explorer（和其他浏览器）可能会有变通方法，但是您需要调整背部

为什么不行

直到版本10的Internet Explorer支持一些这些功能，关键的是 FormData 和 FileReader API。您的两个代码片段都依赖于 FileReader API，第二个一个也依靠 FormData 动态上传文件。

如何判断是否执行代码

我最近编写了一个文件上传小部件，检测这些功能并提供不同的代码等待支持。我使用了 Modernizr 中的功能检测，因为它的测试经常由开源社区进行测试：

  var support = {
 //文件是否暴露给JS？ 
 //用于Modernizr @ 
 // https://github.com/Modernizr/Modernizr/blob/master/feature-detects/file/api.js 
'fileReader'： （function testFileReader（）{
 // Test：寻找全局文件类
 return !!（window.File& window.FileList&& window.FileReader）; 
}（）），
 
 //通过formData上传AJAX文件？ 
'formData'：window.FormData！== void 0 
}; 
  

对于你的 fileSelected 需要 support.fileReader 来评估 true ;对于 uploadFile ，您需要 support.formData 。

不支持这些功能的浏览器的解决方法

如果没有这些功能，则无法从前端读取文件或使用AJAX发送文件。你可以做的是通过你当前页面中隐藏的< iframe /> 来发送你的文件，并获得 UploadHandler.ashx 对非XHR请求作出不同的回应。

这个解决方案在技术上是同步的（只发生在另一个隐藏页面），所以你不会获取更新 - 唯一的反馈是上传完成并且服务器已经响应。所以，一旦完全上传，你只能通知用户文件名，大小和成功 - 这可能需要一段时间！

无论如何，这样的HTML看起来如下：

 < form 
 id =form1
 runat = server
 action =UploadHandler.ashx
 target =fileIframe>