IE 11 and IE Edge get file.type failed

问题

"change .btn-file :file"       : "getfileinfo",

getfileinfo: function(e){

    var fileInput = document.getElementById('fileupload');
    var file = fileInput.files[0];

    if(!file || (file.type != 'text/plain' && file.type != 'text/csv' && file.type != 'application/csv' && file.type != 'application/vnd.ms-excel' && file.type != 'text/csv')){
        $('.alert-file').show();
        $('.alert-file').delay(4000).fadeOut('slow');
        return false;
    }
    var reader = new FileReader();

    reader.onload = function(e) {
        $('#fileData').val(reader.result);
        $('#fileName').val(file.name); 

    };
    reader.readAsDataURL(file);

}

file.type is null if i used in IE11 and IE Edge. All other browser working fine.

Can someone help me on this ?

回答1:

Test case

<input type="file" onchange="document.body.innerText = this.files[0].type" />

returns MIME for SVG, PNG, ZIP, but returns "" for PDF

Reproduced on IE11 under Windows 8.1 Pro x64

Version: 11.0.9600.18053
Update Versions: 11.0.24 (KB3093983)

Bug already reported and closed with "could not reproduce" https://connect.microsoft.com/IE/Feedback/Details/2009205. It mentions why IE team can not reproduce:

Keep in mind that IE can only determine the MIME type of a file based on its extension when a handler application for that MIME type (e.g. Adobe Reader) is installed on the system and creates the mapping inside the registry's HKEY_CLASSES_ROOT registry hive. If no mapping exists in the registry, then IE has no way to know what MIME type the file is.

Among 20 GB of freshly installed Windows there was no space to put file tool

回答2:

I was able to reproduce this error on the free Windows 7 / IE 11 VM (available here), which crucially does NOT come with a default PDF handler and so does not know what the mimetype is.

As a result, the only workaround I came up with was this (as an example for PDF files - change application/pdf and pdf as needed):

if(file.type == 'application/pdf' || file.name.toLowerCase().endsWith('pdf'))
{
    //code to execute
}

Note that this won't work without the polyfill for endsWith on all versions of IE - so here is the polyfill snippet which you need to include anywhere in your code (which comes from the Mozilla page here)

if (!String.prototype.endsWith) {
  String.prototype.endsWith = function(searchString, position) {
      var subjectString = this.toString();
      if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
        position = subjectString.length;
      }
      position -= searchString.length;
      var lastIndex = subjectString.lastIndexOf(searchString, position);
      return lastIndex !== -1 && lastIndex === position;
  };
}

来源：https://stackoverflow.com/questions/32849014/ie-11-and-ie-edge-get-file-type-failed

标签

html

internet-explorer-11

microsoft-edge