Ajax file upload not working in I.E

Question

I am uploading images using ajax and php. My code is working fine in firefox. But in I.E, it doesn't work!

Here is my HTML code,

<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
body { padding: 30px }
</style>
</head>
<body>
    <h1>File Upload Progress Demo #1</h1>
        <form action="fileup.php" method="post" enctype="multipart/form-data">
        <input id="inp" type="file" name="uploadedfile" style="display:none"><br>
        <input id="btn" type="submit" value="Upload File to Server" style="display:none">
    </form>

    <div id="fileSelect" class="drop-area">Select some files</div>

<script>
(function() {

$('form').ajaxForm({

    complete: function(xhr) {
        alert(xhr.responseText);
    }
}); 

})();       


var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("inp");


fileElem.addEventListener("change",function(e){
  document.getElementById('btn').click();
},false)  


fileSelect.addEventListener("click", function (e) {
  fileElem.click();
  e.preventDefault(); 
}, false);


</script>

</body>
</html>

Here is php code,

<?php
$target_path = "images/";

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['uploadedfile']['name']). 
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";
}
?>

In firefox the file uploads perfectly and alert comes up, But in I.E nothing happens!

If you are using jQuery I would recommend using that to bind the events rather that blah.addEventListener('click')... you could do $('blah').on('click', function(){})....., let jquery handle that business for you — Dale, Aug 06 '12 at 11:23
I don't think XHR uploads are supported with Internet Explorer. Check out this response on stackoverflow. http://stackoverflow.com/a/8899308/464064 — John F., Aug 06 '12 at 11:25
IF you want cross browser ajax file uploading, you will have to rely on some flash based plugins — Oussama Jilal, Aug 06 '12 at 11:27
Just wanted to note: The website https://github.com/malsup/form/#file-uploads has some information about specific browsers being supported, so how can you say that it has to work with Internet Explorer? It is MIT/GPL licensed, there is no warranty and no fitness for a particular purpose. If you miss something, you have to add it. That is how open source works. — hakre, Aug 06 '12 at 11:27

DanielB · Accepted Answer · 2012-08-06T11:47:39.370

3

From the examples page of the form plugin

Browsers that support the XMLHttpRequest Level 2 will be able to upload files seamlessly.

IE doesn't support XMLHttpRequest Level 2.

EDIT:

Okay, it doesn't seem to be an Ajax issue, because the plugin uses a iframe fallback. You may need to refactor your javascript code

$(function(){
    $('form').ajaxForm({
        complete: function(xhr) {
            alert(xhr.responseText);
        }
    }); 

    $('#inp').change(function(e) {
        $('#btn').click();
    });
});

But as a side note, file drop is also not available in IE. So it only works if you select a file manually in IE. And a hidden file select will not allow the user to select a file. Raising the click event from javascript on a file input is also not possible, you have to go with a transparent file input.

edited Aug 06 '12 at 11:47

answered Aug 06 '12 at 11:25

DanielB

19,910
2
44
50

Well! When i don't use style="display:none" and submit the form by clicking the button, it works fine. But invoking the click event at change event of fileinput, it doesn't work! So, XMLHttpRequest Level 2 seems to be working fine! – MJQ Aug 06 '12 at 11:29
No, when you click the submit button in the form, the form is submitted as usual by the browser (POST multipart request), not by ajax. – DanielB Aug 06 '12 at 11:30
Run the code in I.E from the accepted answer in this link http://stackoverflow.com/questions/11776351/uploading-a-file-using-ajax-and-php – MJQ Aug 06 '12 at 11:32
Don't get what you mean with your last comment. It won't work with Ajax up to IE 9. You have to use `iframe` approach or flash uploaders. this is an often discusses question. – DanielB Aug 06 '12 at 11:36
I'm just saying, copy the code of accepted answer from the link i shared in the last comment and run it in I.E 9. It is working perfectly! – MJQ Aug 06 '12 at 11:40
That's what I was doing! But have you tried your code in I.E? Bcz, still not working! – MJQ Aug 06 '12 at 11:56
Did you read my comments after the code snippet? You can't trigger the click event on the file input by script. – DanielB Aug 06 '12 at 13:00
@DanielB: Wow! are you sure!!!! Well i'm triggering click event on file input by another button and it is working perfectly. What I have found is the form.submit(); error in I.E.! It doesn't allow it when i trigger input change from other element than the input! – MJQ Aug 06 '12 at 13:34
2

I had to implement a styled button to act as "Select a Files" a while ago. The only way was, to have a styled button and placing the input element exactly above this button (higher z-index) and giving them 0 opacity. This way the user clicked on the input without seeing it at all. In `onChange` i could call submit on the form. – DanielB Aug 06 '12 at 13:39

Ajax file upload not working in I.E

1 Answers1