创建在 IE 中工作的文件上传
Posted
技术标签:
【中文标题】创建在 IE 中工作的文件上传【英文标题】：create file upload that work in IE 【发布时间】：2013-03-17 20:12:40 【问题描述】：我想写一个文件上传脚本，可以在 IE 下运行，但是我写的这两种代码在 IE 下都有问题。
请帮忙。如何编写一个在 IE 中工作的文件上传脚本？
类型 1 Problem Not Support File Api In IE（不使用的诀窍是什么？）
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
function 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";
// optional code for multiples approximation
for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++)
sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
document.getElementById("fileNum").innerHTML = nFiles;
document.getElementById("fileSize").innerHTML = sOutput;
// end of optional code
</script>
</head>
<body>
<form id="form1" runat="server">
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple /> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="submit" value="Send file"></p>
</form>
</body>
</html>
类型 2 问题不支持 document.getElementById('fileToUpload').files[0]（是不是 Get Files[0] 的诀窍？）
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function fileSelected()
var file = document.getElementById('fileToUpload').files[0];
if (file)
var fileSize = 0;
if (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);
function 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 = 'unable to compute';
function uploadComplete(evt)
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
function uploadFailed(evt)
alert("There was an error attempting to upload the file.");
function uploadCanceled(evt)
alert("The upload has been canceled by the user or the browser dropped the connection.");
</script>
</head>
<body>
<form id="form1">
<div>
<label for="fileToUpload">
Select a File to Upload</label>
<input type="file" name="fileToUpload[]" id="fileToUpload" onchange="fileSelected();" />
</div>
<div id="fileName">
</div>
<div id="fileSize">
</div>
<div id="fileType">
</div>
<div>
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber">
</div>
<progress id="prog" value="0" max="100.0"></progress>
</form>
</body>
请帮忙:(
【问题讨论】：
哪个版本的IE？ IE10 非常擅长的东西。另外：caniuse.com 你好。我正在开发较低版本的 IE 10 嘿，只是想提醒您注意我对帖子所做的编辑 — 我所描述的是开源社区已经完成了大量工作：您可能想要看看FineUploader。 【参考方案1】：除非您使用的是 IE10 或其他现代浏览器，否则您无法使用这些功能。早期版本的 Internet Explorer（和其他浏览器）可以使用变通方法，但您也需要调整后端代码。
为什么它不起作用
直到版本 10 的 Internet Explorer 不支持其中的许多功能，关键是 FormData 和 FileReader API。您的两个代码 sn-ps 都依赖于FileReader API，第二个代码也依赖于FormData 来动态上传文件。
如何判断代码是否执行
我最近编写了一个文件上传小部件，它可以检测这些功能并根据支持提供不同的代码。我使用了来自Modernizr 的特征检测，因为它的测试定期由开源社区进行测试：
var support =
// Are files exposed to JS?
// As used by Modernizr @
// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/file/api.js
'fileReader' : (function testFileReader()
// Test: look for global file class.
return !!(window.File && window.FileList && window.FileReader);
()),
// AJAX file upload via formData?
'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">
<iframe
name="fileIframe"
style="display:none"
onload="parseIframeResponse"
tabindex="-1">
</iframe>
<p>
<input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple />
selected files:
<span id="fileNum">
0
</span>
; total size:
<span id="fileSize">
0
</span>
</p>
<p>
<input type="submit" value="Send file">
</p>
</form>
一些变化：
-
该表单现在有一个
target，这意味着当它将其内容发布到action 中的URI 时，它将在那里加载响应，而不是在当前页面上。
目标是一个name 对我们包含的iframe 的引用。它用display:none 隐藏，并给出否定的tabindex 只是为了确保用户不会偶然发现它。它还指定了 onload 属性。这是在旧版 IE 中将函数绑定到加载事件的唯一方法。
所以当表单提交时，我们停留在当前页面，服务器响应加载到我们隐藏的 iframe 中。发生这种情况时，浏览器将执行onload 属性中命名的函数。可悲的是，这意味着函数需要在全局范围内！
后端的东西
我不知道你的后端是如何工作的，但是如果 iframe 是加载响应而不是下载它，它需要是 HTML 或纯文本（这需要在 mime-类型）。您可以通过查找 X-Requested-With 标头来判断表单是否从后端通过 AJAX 发布，该标头的值应为 XMLHttpRequest - 如果不存在，则 iframe 正在请求响应并且您需要发送文本或 HTML。您可能想要对 JSON 响应进行字符串化，以公开您想要反馈给用户的值，例如 fileName、fileSize 和 fileType。我希望你可以自己做这件事，或者找一个同事来处理。
捕获 iframe 响应
如前所述，响应处理函数需要在onload 属性绑定到的全局范围内，因为旧的IE 非常古怪。我看到你正在使用 jQuery，所以如果你沿着字符串化服务器响应的路线走，你可以编写这个函数如下：
function parseIframeResponse()
var response = $('#fileIframe').contents().find('body').text();
var object = $.parseJSON(response);
iframe
load事件绑定问题如前所述，iframe 加载事件需要内联绑定为 iframe 本身的属性——这是因为 IE 将无法注册它，否则。但这本身就有问题，因为即使是空的 iframe（空的或不存在的
src将默认为about:blank）也会触发加载事件。为了缓解这种情况，您需要丢弃任何评估为空字符串作为误报的response，并确保您的后端即使遇到错误也会响应一些内容。
据推测，您可能希望使用其中的任何信息来执行您当前在函数fileSelected、uploadProgress 等中获得的一些代码。
希望这会有所帮助。
编辑 1：开箱即用的解决方案
事后看来，尽管在我开发了自己的问题解决方案后写下了这篇文章，但更不用说 Fine Uploader，这是一个经过大量测试 (over 700 closed issues!) 且维护良好的独立插件，它可能被认为是疏忽大意。旨在为 IE7 及更高版本实现最佳文件上传体验。还有a good selection of back-end server components——包括ASP.NET——来解析上传。您可能会发现调整它比自己动手更容易！
编辑 2：没有提及 iframe 的 load 事件的问题。已修改答案。
【讨论】：
很棒的答案，非常感谢您努力提供一个可行的解决方案。 我用 iframe 和表单尝试了代码，但在服务器请求时我得到 0 个文件。 @inbal 我不知道该建议什么——为我工作！您最好使用完整的前端和后端代码提出一个新问题以找到解决方案。 Fine Uploader 看起来很神奇，但你必须支付许可证 Fine Uploader 现在是 100% 免费的开源软件（MIT 许可），从 v5.9 开始。以上是关于创建在 IE 中工作的文件上传的主要内容，如果未能解决你的问题，请参考以下文章
在 FF、IE6 和 IE7 中工作的 HTML 中垂直和水平居中的实用解决方案