使用jQuery.ajax在IE中发送multipart/formdata

Question

有没有办法在Internet Explorer中实现以下解决方案？（IE7及以上版本）

链接: 使用jQuery.ajax发送multipart/formdata

这个解决方案的代码在其他浏览器上运行良好，但在IE浏览器上存在问题。

- James Nine

---

使用此链接进行多部分/格式数据上传：http://www.freshdesignweb.com/wp-content/uploads/downloads/2011/01/ajax-file-upload.zip - Nilesh patel

Answer 1

不，你不能使用jQuery.ajax上传文件，而且IE不支持FormData。你可以尝试使用Uploadify jQuery插件通过ajax上传文件。同时，你也可以使用jQuery Form插件上传文件。请查看Uploadify jQuery 插件和jQuery Form Plugin。

- Sarfraz

---

这个支持文件上传吗？ - Swanidhi

截至今天，Uploadify声称不兼容IE < 10。无论如何，对于建议使用JQuery表单插件，我给予+1的支持。 - edtruant

Answer 2

不幸的是，IE目前还不支持FormData API。但是，你可以使用任何数量的jQuery AJAX表单提交插件（例如这个）来实现类似的功能。

- Annabelle

Answer 3

我也曾经遇到过这个问题，对于需要的人可能会有用。 FormData只支持IE10及以上版本，这里是链接。在旧浏览器中无法像现代浏览器一样使用FormData绑定输入字段，因此会出现错误。在IE中无法通过AJAX上传文件。有两种替代方法可供选择：

• 使用一些插件，如Uploadify jQuery插件通过ajax上传文件。您还可以使用jQuery表单插件来多次上传和uploadify。

• 另一种方法是使用iframe。

以下是代码

  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;
            }

- Gkrish

---

innerHTML和eval极有可能导致XSS安全漏洞。 - robocat

请查看此链接。 - Gkrish

Answer 4

尝试像这样设置表单属性：

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

或者尝试寻找现成的jQuery上传插件。

- idm

---

FormData 不支持 IE < 10。仅适用于 IE10+。 - Paul Vargas