FormData file, ajax doesn't post $_FILES in IE 11

Question

I have the following code (formdata) in JavaScript and it's working properly in Mozilla and Chrome. When I tried it in IE 11, it doesn't POST well using ajax. The success function is called, but $_FILES is empty on the server side.

file = _files[i][j];
if(j<_files[i].length){

    if(file){
    var data = new FormData(); 
    data.append("uploadedimages", file);
    console.log("formdata:"+data);
    progressElement = $('#divimg_'+i+'_'+j);
    progressElement.css('visibility','visible').hide().fadeIn('500');

    $.ajax({
        url: "<?php echo base_url();?>"+"upload/do_upload",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data){
            console.log(data);
            j++;
            if(j<_files[i].length){
                uploadmore(i,j);
            }else{
                i++;
                uploadme(i,0);
            } 
        },
        xhr: function()
        {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener( 'progress', function( e )
            {
                if( e.lengthComputable )
                {
                    // Append progress percentage.
                    var progressValue = ( e.loaded / e.total ) * 100;
                    console.log( i + ':' + progressValue );
                    progressElement.find( 'input' ).val( progressValue ).change();

                    // Listen for clicks on the cancel icon.
                    $('#stopupload').click( function()
                    {
                        if( progressElement.hasClass( 'working' ) )
                        {
                            xhr.abort();
                            progressElement.fadeOut(500);
                        }
                    });

                    if( progressValue == 100 )
                    {
                        progressElement.removeClass( 'working' );
                    }
                }
            }, false);
            return xhr;
        }
    });  
    } 
    else{
        console.log("FILE ERROR!");
        j++;
        uploadmore(i,j);
        }
}

UPDATE: its working in other pc using IE except my IE. we have the same versions of IE 11 v. etc. i reset to default my iE but still not working. — John Christian De Chavez, Apr 29 '15 at 05:47
Have you ever solved this problem? im facing the same thing? — Merijndk, May 28 '15 at 20:29
@Merijndk yes. i dont know what is the main problem. but its working on other pc. all browser. only in my pc its not working properly — John Christian De Chavez, May 29 '15 at 05:30

score 0 · Answer 1 · edited Jun 29 '18 at 00:47

I had the same issue. After days of trying various parameters, I got it to work with IE 11. Be sure to add form.serialize() to the data component. I also added the full URL of the receiving URL

data        : formdata ? formdata : form.serialize(),


        $('#btnUploadFile').on('click', function () {

                var formdata = new FormData();
                var files = $("#fileUpload").get(0).files;

                // Add the uploaded image content to the form data collection
                if (files.length > 0) {
                    formdata.append("UploadedImage", files[0]);
                }
                else
                {
                    alert("Please select a file to upload.")
                    return;
                }

                var loc = window.location;
                var uploadReceiverURL;

                if (loc.host.indexOf("local")>-1)
                {
                    uploadReceiverURL = loc.protocol + '//' + loc.host + "/uploadReceiver.aspx";
                }
                else
                {
                    uploadReceiverURL = loc.protocol + '//' + loc.host +  "/rolechanges/uploadReceiver.aspx";
                }

                console.log('uploadReceiverURL: ' + uploadReceiverURL);
                var ajaxRequest =  $.ajax({
                    url         : uploadReceiverURL,
                    data        : formdata ? formdata : form.serialize(),
                    cache       : false,
                    contentType : false,
                    processData : false,
                    type        : 'POST',
                    success     : function(data, textStatus, jqXHR) 
                    {
                        console.log('Success: ' + textStatus);
                    },
                    error: function(jqXHR, textStatus, errorThrown)
                    {
                        console.log('ERRORS: ' + textStatus);
                    } 
                });
                ajaxRequest.done(function (xhr, textStatus) {      
                    document.getElementById('fileUpload').value = '';
                });
            });

        })

FormData file, ajax doesn't post $_FILES in IE 11

1 Answers1