FormData ajax upload on IE8 -> alternatives and ho

问题:

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;

回答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.

回答2:

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.

回答3:

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>