Question

在IE9中，不支持FormData，这使得使用XMLHttpRequest上传文件的重要性降低了很多。

可以这样做吗？我已经看过iFrames提到了，虽然我不反对编写一些毛茸茸的代码，但我不知道如何实现这一点（有很多资源在讨论上传到iFrame而不是如何获得从iFrame到服务器的文件。）

使用 vanilla JavaScript （没有第三方库），如何在不使用FormData的情况下异步上传文件？

Answer 1

这段代码可以解决问题。很抱歉很久以前我认为IE9也可以使用XHR上传（应该，但这是Iframe选项）。

它执行以下操作：

向页面添加文件输入（也可以用HTML格式）
将该文件选择器放入
向表单添加凭据
将表单提交给iframe，并将其页面用作返回值。

fileSelection  = document.createElement("div");
//create the file input
fileSelection.browseSelect = document.createElement("input");
fileSelection.browseSelect.type = "file";
fileSelection.browseSelect.name = "file[]";
fileSelection.browseSelect.style.display = "block";
fileSelection.browseSelect.style.position = "absolute";
fileSelection.browseSelect.style.left = "50%";
fileSelection.browseSelect.style.top = "auto";
fileSelection.browseSelect.style.height = "36px";
fileSelection.browseSelect.style.width = "36px";
fileSelection.browseSelect.style.bottom = "0px";
fileSelection.browseSelect.style.margin = "0px 0px -1px 90px";  
fileSelection.browseSelect.style.filter = "alpha(opacity=0)";
fileSelection.browseSelect.style.zIndex = 14;

//Put a form in it.
fileSelection.form = document.createElement("form");
fileSelection.form.method = "POST";
fileSelection.form.action = [url to server]; //put your own file upload handler here. 
fileSelection.form.enctype = "multipart/form-data";
fileSelection.form.encoding = "multipart/form-data";
fileSelection.appendChild(fileSelection.form);
//Append the file input to the form.
fileSelection.form.appendChild(fileSelection.browseSelect);

document.body.appendChild(fileSelection);

function doUploadObjectUpload()
{
    var tempFrame = document.createElement("iframe");
    tempFrame.src = "";
    tempFrame.allowTransparancy = "true";
    tempFrame.style.display = "none";
    tempFrame.frameBorder = 0;
    tempFrame.style.backgroundColor = "transparent";
    tempFrame.onload = followUpOnHTML4Upload.bind(this,tempFrame);

    tempFrame.name = "tmpFrameUpload"
    this.appendChild(tempFrame);
    this.form.target = tempFrame.name;
    this.form.name = "uploadForm";
    this.form.acceptCharset = "UTF-8"

    //This is an example of a hidden input, used to pass extra vars to the server. Add more if you need them.
    var tempNodePath = document.createElement("input");
    tempNodePath.type = "hidden";
    tempNodePath.value = [dir]; //if you want specify a target path.
    tempNodePath.name = "filePath";
    this.form.insertBefore(tempNodePath, this.form.childNodes[0]);

    this.form.submit();
}

function followUpOnHTML4Upload(frameId)
{
        //Here you can check the response that came back from the page.
}

$_FILES

使用AJAX上传文件而不使用FormData（IE9）

1 个答案: