Send multipart/formdata with jQuery.ajax in IE

Question

Is there a way to do the following solution in Internet Explorer? (IE7 and up)

link: Sending multipart/formdata with jQuery.ajax

The solution code works great in every browser but IE.

Answer 1

No, you can't use jQuery.ajax to upload files and FormData isn't supported by IE unfortunately.

Check out the Uploadify jQuery plugin to upload files via ajax. You can also use jQuery Form Plugin to upload files via ajax.

Answer 2

I too have faced this problem ,it may be useful to some one in need . FormData is supported only from IE10 onwards here's a link.Error because you cannot bind input fields in old browsers, like in a modern ones using FormData. You cannot upload files through AJAX in IE.Their are two alternative ways to do

• Use some plugin like Uploadify jQuery plugin to upload files via
  ajax. You can also use jQuery Form Plugin to
  multi and uploadify

• Other way is you may use iframe.

Here's is the code

  if(!isAjaxUploadSupported()){ //IE fallfack
            var iframe = document.createElement("<iframe name='upload_iframe_myFile' id='upload_iframe_myFile'>");
            iframe.setAttribute("width", "0");
            iframe.setAttribute("height", "0");
            iframe.setAttribute("border", "0");
            iframe.setAttribute("src","javascript:false;");
            iframe.style.display = "none";

            var form = document.createElement("form");
            form.setAttribute("target", "upload_iframe_myFile");
            form.setAttribute("action", "fileupload.aspx"); //change page to post
            form.setAttribute("method", "post");
            form.setAttribute("enctype", "multipart/form-data");
            form.setAttribute("encoding", "multipart/form-data");
            form.style.display = "block";

            var files = document.getElementById("myFile");//Upload Id
            form.appendChild(files);
            $conv("#container_myFile").html("Uploading...");

            document.body.appendChild(form);
            document.body.appendChild(iframe);
            iframeIdmyFile = document.getElementById("upload_iframe_myFile");

            // Add event...
            var eventHandlermyFile = function () {
                if (iframeIdmyFile.detachEvent) 
                    iframeIdmyFile.detachEvent("onload", eventHandlermyFile);
                else 
                    iframeIdmyFile.removeEventListener("load", eventHandlermyFile, false);

                response = getIframeContentJSON(iframeIdmyFile);

            }

            if (iframeIdmyFile.addEventListener) 
                iframeIdmyFile.addEventListener("load", eventHandlermyFile, true);
            if (iframeIdmyFile.attachEvent) 
                iframeIdmyFile.attachEvent("onload", eventHandlermyFile);

            form.submit();

            return;
        }
        ////var data = new FormData();
        //// code go here(for modern browsers)


        function isAjaxUploadSupported(){
                var input = document.createElement("input");
                input.type = "file";

                return (
                    "multiple" in input &&
                        typeof File != "undefined" &&
                        typeof FormData != "undefined" &&
                        typeof (new XMLHttpRequest()).upload != "undefined" );
        }
        function getIframeContentJSON(iframe){
                //IE may throw an "access is denied" error when attempting to access contentDocument on the iframe in some cases
                try {
                    // iframe.contentWindow.document - for IE<7
                    var doc = iframe.contentDocument ? iframe.contentDocument: iframe.contentWindow.document,
                        response;

                    var innerHTML = doc.body.innerHTML;
                    //plain text response may be wrapped in <pre> tag
                    if (innerHTML.slice(0, 5).toLowerCase() == "<pre>" && innerHTML.slice(-6).toLowerCase() == "</pre>") {
                        innerHTML = doc.body.firstChild.firstChild.nodeValue;
                    }
                    response = eval("(" + innerHTML + ")");
                } catch(err){
                    response = {success: false};
                }

                return response;
            }

Answer 3

Try to set forms' attributes like this:

$( "#yourformid" ) .attr( "enctype", "multipart/form-data" ) .attr( "encoding", "multipart/form-data" );

or rather try to find ready-made jquery upload plugin

Answer 4

Unfortunately, IE doesn't support the FormData API yet. However, you can achieve something similar using any number of jQuery AJAX form post plugins, such as this one.