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.
Internet Explorer up until version 10 doesn't support a number of these features, the key ones being the FormData and FileReader APIs. Both of your code snippets rely on the FileReader API, and the second one also relies on FormData to upload the file dynamically.
Internet Explorer直到第10版都不支持这些特性，关键的特性是FormData和FileReader api。您的两个代码片段都依赖于FileReader API，第二个代码片段还依赖于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:
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 fileSelected function, you'll need support.fileReader to evaluate true; for uploadFile, you need 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 发送文件，并获取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!
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 name reference to an iframe we've included. It is hidden with display:none, and given a negative tabindex just to make sure the user doesn't stumble into it. It also has an onload property specified. This is the only way of binding functions to the load event in older versions of IE.
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 onload attribute. Sadly, this means that function needs to be in the global scope!
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-With header, 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.
As mentioned, the response handler function will need to be in the global scope for the onload attribute 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:
function parseIframeResponse(){
var respOnse= $('#fileIframe').contents().find('body').text();
var object = $.parseJSON(response);
}
Issues with the iframe load event binding
iframe负载事件绑定问题
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 src will default to about:blank) fires a load event. To mitigate this you will need to discard any response that 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.
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.
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!
京公网安备 11010802041100号