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

2022-01-15 00:00:00 file-upload xmlhttprequest javascript ajax

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

In IE9, FormData is not supported, which makes uploading files using XMLHttpRequest a lot less trivial.

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

Can this be done? I've seen iFrames mentioned, and while I'm not opposed to writing some hairy code, I'm at a loss as to how to achieve this (there are many resources talking about uploading to an iFrame but not about how to get the file from the iFrame to the server).

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

Using vanilla JavaScript (no third party libraries), how would one upload a file asynchronously without the use of FormData?

推荐答案

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

This code should do the trick. Sorry was a long time ago and I thought that IE9 also could upload using XHR (It should, but this is the Iframe option).

它执行以下操作:

  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

PHP for example will store the files in $_FILES

相关文章