Image upload functionality is not working in internet explorer while using formdata

Question

Why image upload functionality is not working in internet explorer9 if I am using multipart/form-data to take image data. How can I upload image in internet explorer.

This is my code that i am using to upload image.

      var formData = new FormData($('form')[1]);


    var onclick_attr=$('#Upload').attr('onclick');
     $.ajax({
            url: '${pageContext.servletContext.contextPath}/UploadImage',
            data: formData,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function(xhr) {
                $('#process-img-div').hide();
                $('#uploading-img').show();
                $('#Upload').attr('onclick','').css('opacity','0.5');
                $('#loader-imgforlogo').show();
            },
            success: function(xhr) {

                var str = xhr.split('&');
                for(var i=0; i<str.length; i++) {
                    var keys = str[i].split(':');
                    if(keys[0]=='Name')
                        fileName = keys[1];
                    else if(keys[0]=='Width')
                        imgWidth = keys[1];
                    else if(keys[0]=='Height')
                        imgHeight = keys[1];
                    else if(keys[0]=='Path')
                        filePath = keys[1];
                    }

                $('#preview').attr({
                               'src':'${pageContext.servletContext.contextPath}/uploads/'+fileName
                });

                $('#process-img-div').show();
                $('#uploading-img').hide();
            },
            complete:function(jqXHR, textStatus){
                $('#Upload').attr('onclick',onclick_attr).css('opacity','1');
                $('#loader-imgforlogo').hide();
                $.fancybox.close(); 

            },
            error: function(xhr) {

            }
    });
     }

what you have written in File : UploadImage ? – Yogesh Prajapati Dec 18 '12 at 14:51 — Yogesh Prajapati, Dec 18 '12 at 14:51

score 1 · Answer 1 · edited May 23 '17 at 12:18

FormData object is not supported in Internet Explorer until IE10. IE9 doesn't support FormData Object. So it wouldn't work with IE9 Check the supported browsers for FormData Object

Also take a look of another similar issue FormData not working in Internet Explorer?

For the older browsers that doesn't support FormData object, you can first check if the browser supports it here How can I check if the browser support HTML5 file upload (FormData object)?

If the browser doesn't support you can traverse the form dom elements and create a json object to set as $.ajax method data attribute value. If you are uploading any files take a look at Iframe Upload Solution

Image upload functionality is not working in internet explorer while using formdata

1 Answers1