javascript 使用 AJAX 上传文件而不使用 FormData (IE9)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27006938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uploading files using AJAX without FormData (IE9)
提问by Qix - MONICA WAS MISTREATED
In IE9, FormDatais not supported, which makes uploading files using XMLHttpRequesta lot less trivial.
在 IE9 中，FormData不支持，这使得上传文件变得XMLHttpRequest不那么琐碎。
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).
这能做到吗？我已经看到提到 iFrames，虽然我不反对编写一些毛茸茸的代码，但我不知道如何实现这一点（有很多资源在谈论上传到 iFrame 但没有关于如何获得文件从 iFrame 传输到服务器）。
Using vanilla JavaScript(no third party libraries), how would one upload a file asynchronously without the use of FormData?
使用vanilla JavaScript（无第三方库），如何在不使用FormData?
采纳答案by Mouser
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).
这段代码应该可以解决问题。抱歉，很久以前，我认为 IE9 也可以使用 XHR 上传（应该可以，但这是 Iframe 选项）。
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.
- 向页面添加文件输入（也可以在 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.
}
PHP for example will store the files in $_FILES
例如，PHP 会将文件存储在 $_FILES
