CODEWITHSUNDEEP
javascriptjqueryajax
wasiim_dev
wasiim_dev

Reputation: 1137

How to send image to .net Webservice using Ajax in IE8?

The folowing post is related to: How to send image to PHP file using Ajax?

I managed to get this working as per the above post, but it fails to work on IE8.

Is there a way to get this to work on ie8+?

Here is my code:

$("form[name='uploader']").submit(function(e) {
    var formData = new FormData($(this)[0]);

    $.ajax({
        url: dotnetpage,
        type: "POST",
        data: formData,
        async: false,
        success: function (msg) {
            $('.js-ugc-image').attr('src', msg);
        },
        cache: false,
        contentType: false,
        processData: false
    });

    e.preventDefault();
});

Upvotes: 1

Views: 290

Answers (2)

Vfleitao
Vfleitao

Reputation: 58

IE 8 does not have formdata, you can use a hidden iframe and post it and read the results. I've used a technique that was something like this Clone the form, move original form into a hidden iframe (this needs to be done because you cant clone or set input type files value on IE) and then submit and read the result of the submit.

Something like this which is a code i used before and worked:

var $form = $('your form');//GET YOUR FORM

//Create Hidden iframe
var _hiddenIframe = $('<iframe id="_hiddenframe" style="display:none;"></iframe>');

//Create Copy Form and add the attributes of the original
var _copyForm = $('<form id="_copyForm" name="_copyForm" style="">');
_copyForm.attr({'method':$form.attr('method'),'action':$form.attr('action'), 'enctype':$form.attr('enctype')});             

//Get original fields
$original = $form.children('*');

//Clone and append to form
$original.clone(true).appendTo($form);

//send the original fields to hidden form
$original.appendTo(_copyForm);  

//Add the iframe to the body
_hiddenIframe.appendTo('body');

//Add the form to the hidden iframe 
_copyForm.appendTo(_hiddenIframe.contents().find('body'));

var $r; 

//submit the form
_copyForm.submit();

//after it reloaded(after post)
_hiddenIframe.on('load',function(){ 
    //read result (maybe a json??)
    $r = $.parseJSON(_hiddenIframe.contents().find('body').text());
    //Do something with the result
    if($r.result=='ok'){
        //Do Something if ok
    }           
    else{
        //Do Something if error
    }
});

Upvotes: 1

Stefano Altieri
Stefano Altieri

Reputation: 4628

No,sorry, IE8 doesn't support the FormData object. (See http://caniuse.com/#search=formdata)

Whay you can do is embed the <input type='file > tag in a separate form and submit it using jQuery.

Upvotes: 0

Related Questions