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

问题描述

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

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

使用vanilla JavaScript（无第三方库），如何不上传文件使用 FormData ？

解决方案

对不起，很久以前，我认为IE9也可以上传使用XHR（它应该，但这是Iframe选项）。

它执行以下操作：

添加文件输入到您的页面（也可以在HTML中完成）
$ b $ ol

将文件选择器在表单中添加凭证

将表单提交到iframe并使用其页面作为返回值。

  fileSelection = document.createElement（div）; 
 //创建文件输入
 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; 
 
 //在表单中放置一个表单。 
 fileSelection.form = document.createElement（form）; 
 fileSelection.form.method =POST; 
 fileSelection.form.action = [url to server]; //把你自己的文件上传处理程序放在这里
 fileSelection.form.enctype =multipart / form-data; 
 fileSelection.form.encoding =multipart / form-data; 
 fileSelection.appendChild（fileSelection.form）; 
 //将文件输入附加到表单。 
 fileSelection.form.appendChild（fileSelection.browseSelect）; 
 
 document.body.appendChild（fileSelection）; 
 
函数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
 
 //这是一个隐藏输入的例子，用于将额外的变量传递给服务器。添加更多，如果你需要他们。 
 var tempNodePath = document.createElement（input）; 
 tempNodePath.type =hidden; 
 tempNodePath.value = [dir]; //如果你想指定一个目标路径。 
 tempNodePath.name =filePath; 
 this.form.insertBefore（tempNodePath，this.form.childNodes [0]）; 
 
 this.form.submit（）; 
} 
 
函数followUpOnHTML4Upload（frameId）
 {
 //在这里你可以检查从页面返回的响应。 PHP的例子将存储文件 $ _文件中 
 
In IE9, FormData is not supported, which makes uploading files using XMLHttpRequest a lot less trivial.

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).

Using vanilla JavaScript (no third party libraries), how would one upload a file asynchronously without the use of FormData?
 解决方案 
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).

It does the following:

Add a file input to your page (can also be done in HTML)
Put that file selector in a form
add credentials to the form
Submit the form to the iframe and use its page as return value.
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 for example will store the files in $_FILES
                        
这篇关于使用不带FormData的AJAX上传文件（IE9）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！