【问题标题】:Send multipart/formdata with jQuery.ajax in IE在 IE 中使用 jQuery.ajax 发送 multipart/formdata
【发布时间】:2011-10-26 06:53:23
【问题描述】:

有没有办法在 Internet Explorer 中执行以下解决方案? (IE7 及以上)

链接:Sending multipart/formdata with jQuery.ajax

解决方案代码在除 IE 之外的所有浏览器中都运行良好。

【问题讨论】:

标签: javascript jquery internet-explorer


【解决方案1】:

不,您不能使用jQuery.ajax 上传文件,很遗憾IE 不支持FormData

查看Uploadify jQuery plugin 以通过 ajax 上传文件。也可以使用jQuery Form Plugin通过ajax上传文件。

【讨论】:

  • 这个支持文件上传吗?
  • 更新,截至今天,Uploadify 声称它与 IE
【解决方案2】:

很遗憾,IE 还不支持FormData API。但是,您可以使用任意数量的 jQuery AJAX 表单发布插件来实现类似的效果,例如 this one

【讨论】:

    【解决方案3】:

    我也遇到过这个问题,可能对有需要的人有用。 FormData 仅从 IE10 开始受支持,此处为 a link.Error,因为您无法在旧浏览器中绑定输入字段,例如在使用 FormData 的现代浏览器中。 您不能在 IE 中通过 AJAX 上传文件。它们是两种替代方法

    • 使用像 Uploadify jQuery 插件这样的插件来上传文件
      阿贾克斯。您也可以使用 jQuery 表单插件来
      multiuploadify

    • 其他方式是你可以使用 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;
                }
    

    【讨论】:

    • innerHTML 和 eval 极有可能导致 XSS 安全漏洞。
    • 看看这个link
    【解决方案4】:

    尝试像这样设置表单的属性:

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

    还是找现成的jquery上传插件试试

    【讨论】:

    • FormData 不受 IE
    猜你喜欢
    • 2011-07-20
    • 2012-10-01
    • 2014-01-08
    • 1970-01-01
    相关资源
    最近更新 更多