Image uploading from computer not working in IE9

Question

I have a particular code and it works fine on Google chrome but not on IE9. i have a div and i drag an image from computer to the div and it loads on Google Chrome but not with IE9. Please help..!

<div id="holder" ></div> 
    <p id="status">
        Please Drag your image from computer and paste it on the div to view it.
    </p>
</div>

jQuery:

var holder = document.getElementById('holder'), 
state = document.getElementById('status'); 

if (typeof window.FileReader === 'undefined') { 
    state.className = 'fail'; 
} else { 
   state.className = 'success'; 
   state.innerHTML = 'Please Drag your image from computer and paste it on the div to view it.'; 
} 

holder.ondragover = function () { 
    this.className = 'hover'; 
    return false; 
}; 

holder.ondragend = function () { 
    this.className = ''; 
    return false; 
}; 

holder.ondrop = function (e) { 
    this.className = ''; 
    e.preventDefault();    
    var file = e.dataTransfer.files[0], 
    reader = new FileReader(); 
    reader.onload = function (event) { 
        alert(event); 
        console.log(event.target); 
        holder.style.background = 'url(' + event.target.result + ') no-repeat center'; 
    }; 

    console.log(file); 
    reader.readAsDataURL(file);
    return false; 
};

What could be the problem??

Answer 1

HTML5 File API is not supported by IE9 browser

UPD: and HTML5 Drag and Drop API support in IE9 is only partial, the part you are trying ( dataTransfer.files ) is not supported. Here you can see what browsers support drag and drop HTML5 API

Answer 2

恐怕在IE10 2010.3版之前不支持该功能。检查当前使用的是哪个版本