Question

I have the following HTML code

<label class="fileinput-button" id="fileUpload-label">
   <span class="btn btn-add" id="fileUpload-span">Add a file..</span>
      <div id="fileinput-outer">
         <input type="file" name="files[]" id="fileUpload">
      </div>
</label>

Then I use Jquery to get the list of files with the Input type= File

$('#fileUpload').live('change', function () {
    $.map($('#fileUpload').get(0).files, function (file) { 
        $('#fileList')
            .append(CreateFileList(file.name, true));
        });
 });

This works great in Chrome and Firefox, however in IE the error is

Unable to get value of the property 'length': object is null or undefined

So I began to troubleshot and have this code

var arrFiles[];
arrFiles = $('#fileUpload').get(0).files;
    if(arrFiles.length === 0) {
        alert('empty');    
    } else {
       alert('has value');    
    }

Chrome and Firefox – the code and alerts work as expected, however IE still throws the error

Unable to get value of the property 'length': object is null or undefined

It seems like IE might have an issue with Jquery Get ..

Anyone know how I can fix this error in IE with or without Jquery ?

Answer 1

jQuery().get works fine, you haven’t broken it. However, there is no files property on <input type=file /> for IE 9, it was introduced in IE 10. See this example http://jsfiddle.net/RtqnZ/

you are also missing the multiple property on your input

Reference: http://msdn.microsoft.com/en-us/library/ie/hh772931(v=vs.85).aspx