Angular IE9 fileupload is not working

问题:

I use this way to upload file:

  <input type="file" 
         name="upload-file" 
         ng-model= "excelFile" 
         accept=".xlsx" 
         onchange="angular.element(this).scope().fileChanged(this);"
         required="true" 
  />

Create the fileChanged method in the controller

 $scope.fileChanged = function(files) {
     $scope.excelFile = files[0];
 };

It works in FireFox, Chrome IE10, IE11, but in IE9 it shows that the "files is null our undefined".

回答1:

I faced the same issue when uploading image files. It worked fine in IE10 and later versions. Any version below 10 , file upload is not working. Refer this link

IE9Issue : File Upload using AngularJS

回答2:

It's not possible. IE9 does not support the file API.

You may refer to this stackoverflow question and to this page on MSDN

回答3:

There is no way to use IE9 and below with the your method. You have two possible ways: 1. Use Flash uploader in case of IE9 and lower. Try to avoid this scenario 2. Use the http://malsup.com/jquery/form/ which will give you "some sort" of file access, as HTML 5 does :)

回答4:

As mentioned any method of file upload that uses FormData and File API stuff won't work in IE9 as they aren't available until IE10.

However, two angular modules that have a fallback method that will work with IE9 for uploading files that I know of are:

• nervgh/angular-file-upload
• danielfarid/angular-file-upload: however, it requires Flash to be installed for IE9 uploads

I am using nervgh/angular-file-upload as it does not require Flash.

回答5:

I think it is because in IE the event is in window.event, not passed in as parameter to the event handler. Therefore, the 'this' will be the doc root or undefined on IE.

You can easily test it by placing console.log(this) in event handler on IE. Check out the Event differences section in this article.

I think you can use a native angular directive ng-change, or just

$scope.$watch('excelFile', function(newVal){
// implementation
})

in the scope.