使用没有 FormData (IE9) 的 AJAX 上传文件

Question

在 IE9 中，不支持FormData，这使得使用XMLHttpRequest 上传文件变得不那么简单了。

这可以吗？我已经看到提到的 iFrame，虽然我不反对编写一些毛茸茸的代码，但我不知道如何实现这一点（有很多资源谈论上传到 iFrame，但没有关于如何获取文件从 iFrame 到服务器）。

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

Answer 1

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

它执行以下操作：

1. 将文件输入添加到您的页面（也可以在 HTML 中完成）
2. 将该文件选择器放入表单中
3. 向表单添加凭据
4. 将表单提交到 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.
}

例如 PHP 会将文件存储在 $_FILES