FormData ajax upload on IE8 -> alternatives and how it works

Question

I'm tyring to upload a picture with ajax, so I'm using FormData, but it's not working with IE8. I've looked about it and it's not possible to use FormData with IE8, but I've found nothing I've been able to use instead in order to make it work on IE8 and other browser. Could someone tell me what to do please, and how to do it ?

The form I'm trying to submit

<form id="addImgForm" name="addImgForm" method="post" action="#URL(Action('ChiliTest-ImageUpload'))#" enctype="multipart/form-data">
    <input id="newImage" type="file" name="newImage">
    <input type="hidden" name="MAX_FILE_SIZE" value="12345">
    <span id="addImage" class="button-addImage" type="submit"><isTradConstant keyword="l_customizationsChiliEditor_AddImageButtonTitle" template="CustomizationsChiliEditor" init="Ajouter"></span>
</form>

Called on addImgForm submit

$.ajax({ 
    url: myUrl,
    type: "POST",
    data: new FormData($(this).parent()[0]),
    contentType : false,
    async: false,
    processData: false,
    cache: false,
    success: function(data) {
        //do something
    }
}); 
return false;

possible duplicate of [FormData in IE8/9](http://stackoverflow.com/questions/15475215/formdata-in-ie8-9) — waki, Dec 30 '14 at 09:13
@NeS have a look at [this](https://stackoverflow.com/a/11814540/1298308) answer — Aminul, Dec 30 '14 at 09:16
possible duplicate of [Fallback for FormData in IE 8/9](http://stackoverflow.com/questions/10852446/fallback-for-formdata-in-ie-8-9) — Aminul, Dec 30 '14 at 09:17
@Waki I've seen it, but as someone said, the link someone gave was about progress bar, it's not what I'm looking for. — NeS, Dec 30 '14 at 09:34
@NeS check it http://stackoverflow.com/questions/7899513/send-multipart-formdata-with-jquery-ajax-in-ie — waki, Dec 30 '14 at 09:36
@Aminul Didn't understood the link you gave me. It could be good, but I would need some explanations. — NeS, Dec 30 '14 at 09:37
@Waki I've seen it too, but it didn't worked, maybe I haven't used it correctly, how should I do it ? — NeS, Dec 30 '14 at 09:41

score 1 · Answer 1 · answered Dec 31 '14 at 07:59

1

Ideally when i faced this issue, i checked for FormData in browser and if that returns undefined, then i went for form submission via an iframe.

answered Dec 31 '14 at 07:59

Rohith K

1,433
10
15

score 0 · Answer 2 · edited Jan 22 '18 at 17:54

You can use [jQuery Form Plugin][1] to upload files via ajax in IE 8 and your example code should be like this:

[1]:

$(document).ready(function() {

  var options = {
    beforeSend: function() {
      $("#progress").show();
      //clear everything
      $("#bar").width('0%');
      $("#message").html("");
      $("#percent").html("0%");
    },
    uploadProgress: function(event, position, total, percentComplete) {
      $("#bar").width(percentComplete + '%');
      $("#percent").html(percentComplete + '%');
    },
    success: function() {
      $("#bar").width('100%');
      $("#percent").html('100%');
    },
    complete: function(response) {
      $("#message").html("<font color='green'>" + response.responseText + "</font>");
    },
    error: function() {
      $("#message").html("<font color='red'> ERROR: unable to upload files</font>");
    }

  };

  $("#myForm").ajaxForm(options);

});

<script src="http://malsup.github.io/min/jquery.form.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<form id="myForm" action="/demo/Upload" method="post" enctype="multipart/form-data">
  <input type="file" size="60" name="myfile">
  <input type="submit" value="Ajax File Upload">
</form>

<div id="progress">
  <div id="bar"></div>
  <div id="percent">0%</div>
</div>
<br/>
<div id="message"></div>

score 0 · Answer 3 · answered Jan 21 '16 at 06:45

We have used jquery plugin for the same and got resolved this issue.

It is too simple just use

$('#myForm').ajaxForm(function() { 

});

instead of below call, it set all options automatically.

$.ajax({ 
    url: myUrl,
    type: "POST",
    data: new FormData($(this).parent()[0]),
    contentType : false,
    async: false,
    processData: false,
    cache: false,
    success: function(data) {
        //do something
    }
});

Hope this will work out, let me know if any hurdles during implementation. Make sure you added jquery plugin before using ajaxform function. Do not need to do anything for other browser it works for IE and other both.

FormData ajax upload on IE8 -> alternatives and how it works

3 Answers3

Linked