Html 创建在 IE 中工作的文件上传

Question

提问by user1045472

I want to write a file upload script that works in IE but the two types of code that I'm writing have problems in IE.

我想编写一个可以在 IE 中运行的文件上传脚本，但是我正在编写的两种类型的代码在 IE 中都有问题。

Please help. How can you write a file upload script that works in IE?

请帮忙。怎么写一个可以在IE下运行的文件上传脚本？

Type 1
Problem Not Support File Api In IE (Is the trick not to use it?)

类型 1
问题不支持 IE 中的文件 Api（不使用它的技巧是什么？）

    <!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>

Type 2
Problem Not Support document.getElementById('fileToUpload').files[0](Is the trick not to Get Files[0]?)

类型 2
问题不支持 document.getElementById('fileToUpload') .files[0]（不获取文件 [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>

Please Help :(

请帮忙：（

Answer 1

回答by Barney

You can't use these functions unless you're using IE10 or another modern browser. Workarounds are possible for earlier versions of Internet Explorer (and other browsers), but you'll need to adjust your back-end code too.

除非您使用 IE10 或其他现代浏览器，否则无法使用这些功能。较早版本的 Internet Explorer（和其他浏览器）可能有变通方法，但您也需要调整后端代码。

Why it doesn't work

为什么它不起作用

Internet Explorer up until version 10 doesn't support a number of these features, the key ones being the FormDataand FileReaderAPIs. Both of your code snippets rely on the FileReaderAPI, and the second one also relies on FormDatato upload the file dynamically.

直到版本 10 的 Internet Explorer 都不支持这些功能中的许多，关键是FormData和FileReaderAPI。你的两个代码片段都依赖于FileReaderAPI，第二个也依赖于FormData动态上传文件。

How to determine whether to execute the code or not

如何判断是否执行代码

I recently wrote a file upload widget that detected these features and served different code depending on support. I used the feature detections from Modernizr, because it's tests are regularly put to the test by the open source community:

我最近编写了一个文件上传小部件来检测这些功能并根据支持提供不同的代码。我使用了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
};

For your fileSelectedfunction, you'll need support.fileReaderto evaluate true; for uploadFile, you need support.formData.

对于您的fileSelected功能，您需要support.fileReader评估true; 因为uploadFile，你需要support.formData。

A workaround for browsers that don't support these features

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

Without these features it's impossible to read a file from the front-end or to send a file using AJAX. What you can do, though, is send your file via a hidden <iframe/>inside your current page, and get UploadHandler.ashxto respond differently to non-XHR requests.

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

This solution is technically synchronous (just happening in another, hidden page), so you won't get updates — the only feedback is when the upload is complete and the server has responded. So you will only be able to inform the user as to file name, size, and success once they have completely uploaded it — which might take a while!

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

Anyway, the HTML for this would look as follows:

无论如何，此 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>

A few changes:

一些变化：

The form now has a target, which means that when it posts its content to the URI in action, it will load the response in there, as opposed to on the current page.
The target is a namereference to an iframe we've included. It is hidden with display:none, and given a negative tabindexjust to make sure the user doesn't stumble into it. It also has an onloadproperty specified. This is the only way of binding functions to the load event in older versions of IE.

表单现在有一个target，这意味着当它将其内容发布到 URI 中时action，它将在那里加载响应，而不是在当前页面上。
目标是name对我们包含的 iframe的引用。它是用隐藏的display:none，并给出一个否定tabindex只是为了确保用户不会偶然发现它。它还onload指定了一个属性。这是在旧版 IE 中将函数绑定到 load 事件的唯一方法。

So when the form is submitted, we stay on the current page and the server response loads in our hidden iframe. When that happens, the browser will execute the function named in the onloadattribute. Sadly, this means that function needs to be in the global scope!

所以当表单提交时，我们停留在当前页面上，服务器响应加载到我们隐藏的 iframe 中。发生这种情况时，浏览器将执行onload属性中指定的函数。可悲的是，这意味着该函数需要在全局范围内！

Back-end stuff

后端的东西

I don't know how your back-end works, but if the iframe is to load the response instead of downloading it, it will need to be HTML or plain text (and that will need to be specified in the mime-type). You can tell whether the form was posted via AJAX from the back-end by looking for the X-Requested-Withheader, which should have a value of XMLHttpRequest— if that isn't there, then the iframe is asking for the response and you need to send text or HTML. You may want to stringify a JSON response that exposes the values you wanted to feed back to the user like fileName, fileSize& fileType. I'm hoping you can do this yourself or get a colleague to handle it.

我不知道你的后端是如何工作的，但如果 iframe 是加载响应而不是下载它，它需要是 HTML 或纯文本（并且需要在 mime-type 中指定）。您可以通过查找X-Requested-With标头来判断该表单是否是通过 AJAX 从后端发布的，标头的值应为XMLHttpRequest- 如果不存在，则 iframe 正在请求响应，您需要发送文本或HTML。您可能希望将 JSON 响应字符串化，以公开您想要反馈给用户的值，例如fileName, fileSize& fileType。我希望你可以自己做这件事，或者找一个同事来处理。

Capturing the iframe response

捕获 iframe 响应

As mentioned, the response handler function will need to be in the global scope for the onloadattribute to bind to, because of old IE being very quirky. I see you're using jQuery, so if you went down the route of stringifying the server response, you could write this function as follows:

如前所述，响应处理函数需要在onload要绑定到的属性的全局范围内，因为旧的 IE 非常古怪。我看到您正在使用 jQuery，因此如果您沿着将服务器响应字符串化的路线，您可以按如下方式编写此函数：

function parseIframeResponse(){
  var response = $('#fileIframe').contents().find('body').text();
  var object   = $.parseJSON(response);
}

Issues with the iframe loadevent binding
As mentioned earlier, the iframe load event needs to be bound inline as an attribute of the iframe itself — this is because IE will simply fail to register it otherwise. But this is problematic in and of itself because even an empty iframe (an empty or non-present srcwill default to about:blank) fires a load event. To mitigate this you will need to discard any responsethat evaluates to an empty string as a false positive, and make sure your back-end responds with some content even if it encounters a fault.

iframeload事件绑定的问题
如前所述，iframe 加载事件需要作为 iframe 本身的一个属性进行内联绑定——这是因为 IE 将无法注册它。但这本身就是有问题的，因为即使是空的 iframe（空的或不存在的src将默认为about:blank）也会触发加载事件。为了缓解这种情况，您需要丢弃任何response评估为空字符串的误报，并确保您的后端即使遇到错误也会响应某些内容。

Presumably, you would then want to use whatever information is in there to execute some of the code you've currently got in the functions fileSelected, uploadProgress, etc.

据推测，你会再想要使用的任何信息就在那里执行一些你目前的功能得到了代码fileSelected，uploadProgress等等。

Hope this helps.

希望这可以帮助。

EDIT 1: Out-of-the-box solutions

编辑 1：开箱即用的解决方案

In hindsight, despite writing this off the back of having developed my own solution to the problem, it could be considered negligent not to mention Fine Uploader, a heavily tested (over 700 closed issues!) and well maintained stand-alone plugin that aims to achieve the best file upload experience possible for IE7 and up. There's also a good selection of back-end server components— including ASP.NET — to parse the upload. You might find it easier to tweak this than roll your own!

事后看来，尽管在开发了我自己的问题解决方案后写了这篇文章，但可以被认为是疏忽，更不用说Fine Uploader 了，这是一个经过严格测试（超过 700 个已解决的问题！）并且维护良好的独立插件，旨在实现 IE7 及更高版本的最佳文件上传体验。还有很多可供选择的后端服务器组件（包括 ASP.NET）来解析上传。您可能会发现调整它比自己动手更容易！

Html 创建在 IE 中工作的文件上传

提问by user1045472

回答by Barney

Why it doesn't work

为什么它不起作用

How to determine whether to execute the code or not

如何判断是否执行代码

A workaround for browsers that don't support these features

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

Back-end stuff

后端的东西

Capturing the iframe response

捕获 iframe 响应

EDIT 1: Out-of-the-box solutions

编辑 1：开箱即用的解决方案

EDIT 2: Neglected to mention issues with iframe's `load`event. Amended answer in place.

编辑 2：忽略提及 iframe`load`事件的问题。修改答案到位。

相关推荐

最近更新

标签

Html 创建在 IE 中工作的文件上传

提问by user1045472

回答by Barney

Why it doesn't work

为什么它不起作用

How to determine whether to execute the code or not

如何判断是否执行代码

A workaround for browsers that don't support these features

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

Back-end stuff

后端的东西

Capturing the iframe response

捕获 iframe 响应

EDIT 1: Out-of-the-box solutions

编辑 1：开箱即用的解决方案

EDIT 2: Neglected to mention issues with iframe's loadevent. Amended answer in place.

编辑 2：忽略提及 iframeload事件的问题。修改答案到位。

相关推荐

Html 双下划线标签？

Html 在跨度中显示图像而不将其转换为块级元素

Html 如何加载引导程序缩略图

Html -webkit-transform rotate - Chrome 中的像素化图像

相关推荐

最近更新

标签

EDIT 2: Neglected to mention issues with iframe's `load`event. Amended answer in place.

编辑 2：忽略提及 iframe`load`事件的问题。修改答案到位。