CODEWITHSUNDEEP
javascriptinternet-explorerfile-upload
user961627
user961627

Reputation: 12747

Grab SINGLE file from input type=file in IE

I understand IE9 and below don't support file uploads for inputs with multiple files. But I'm unable to even grab the file in a single file upload!

HTML:

<input type='file' id='imgfile' />

Javascript:

var input = document.getElementById("imgfile");
input.addEventListener("change", function (evt) {
file = this.files[0]; /** Is it possible to even just do this much in IE? **/

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                        showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }
                   /* some stuf */
}

I know the FileReader API won't work in IE, then what will? There must be some solution. I've spent a while on this but it's eluding me!

Edit

I should have mentioned, I'm using ajax. So this javascript above is trigger after the uploaded file is uploaded using PHP. Does this mean that we can't even use ajax in IE?

Upvotes: 1

Views: 2337

Answers (2)

NLemay
NLemay

Reputation: 2383

You can't upload a selected file with javascript using IE. To send this file to the server, you'll need to submit your form with the file upload in it (the good old way).

Recents browsers support Ajax file upload (Chrome, Firefox and Opera). For this, you will need XHR2. IE9 doesn't support it, but IE10 should : http://caniuse.com/#feat=xhr2

But I don't understand how your javascript is suppose to take the file back from the server. If you want to use Ajax, you are suppose to read the file from your Ajax request output, not from your fileupload component.

Upvotes: 1

jbabey
jbabey

Reputation: 46647

input.files is an HTML5 property and it most likely not supported in whatever browser you're testing this with.

Have you tried input.value?

Upvotes: 2

Related Questions