CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
Shabbir Rangwala
Shabbir Rangwala

Reputation: 21

Image uploading from computer not working in IE9

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??

Upvotes: 2

Views: 1395

Answers (2)

lebryant
lebryant

Reputation: 351

I'm afraid it is not supported until IE10 version 2010.3 Check which version you're using at the moment

Upvotes: 1

Maksim Vi.
Maksim Vi.

Reputation: 9235

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

Upvotes: 3

Related Questions