jquery upload and post data throught ajax

Question

This is my current code, for uploading and posting data to modal window. Affcourse it works pefrect in IE 10, Chrome, Firefox, Opera... except it doesn't works in IE < 10. Have someone any ideas how should i solve this "bug" or how would i say it is.

$(document).ready(function () {
   $("form[id='form']").submit(function(e) {
      var formData = new FormData($(this)[0]);
      $('#myModal').modal('show');   
      $.ajax({
         url: "home/add_store/post",
         type: "POST",
         data: formData,
         async: false,
         success: function (data) {
            $('#body').html(data);
         },
         cache: false,
         contentType: false,
         processData: false
      });
      e.preventDefault();
   });
});

On webs i found about FormData that it isnt really supported in IE < 10, is there any way that i can still use this?

I dont know i found this code on web and it works that way. What is wrong with async = false? — user3278890, May 15 '14 at 14:53
Have a look at [this post](http://stackoverflow.com/a/15498972/2174170) and see if the suggested workaround works for you too. [This post](http://stackoverflow.com/a/17403514/2174170) also suggests a workaround. Hope they help. — Dumisani, May 15 '14 at 14:56

score 0 · Accepted Answer · answered May 15 '14 at 16:03

Found solution that works also on older browsers. I use jquery form script. Here is code:

<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile" multiple><br>
<input type="text" name="text"><br>
<input type="submit" value="Upload File to Server">
</form>
<div id="status"></div>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>

$('form').ajaxForm({
    complete: function(xhr) {
        $('#status').html(xhr.responseText);
    }
}); 

</script>

jquery upload and post data throught ajax

1 Answers1