如何使用JavaScript从<input type='file'.../>(间接)获取文件

Question

在非IE浏览器中，我遇到了关于"input标签"的问题:

<input type="file" ...

我正在尝试编写上传程序，仅使用JavaScript和ASP.NET。

上传文件时没有问题。

我的问题出现在我想在非IE浏览器中获取文件时。

<input type="file" ...

我不想直接使用input，因为它的外观不能正确更改。

我编写了这段代码来从硬盘中获取文件：

function $tag(_str_tag) {
    return document.getElementsByTagName(_str_tag);
}

function $create(_str_tag) {
    return document.createElement(_str_tag);
}


function $open_file() {
    _el_upload = $create("input");
    _el_body = $tag("body")[0];
    _el_upload.setAttribute("type", "file");
    _el_upload.style.visibility = "hidden";
    _el_upload.setAttribute("multiple", "multiple");
    _el_upload.setAttribute("position", "absolute");
    _el_body.appendChild(_el_upload);
    _el_upload.click();
    _el_body.removeChild(_el_upload);
    return _el_upload.files;
}

在IE中，它工作得很好并返回我的文件。在Chrome和Firefox中，在加载“文件输入对话框”后，它无法返回任何文件。

而Opera和Safari完全不能用。

我可以用这个技巧来解决它，但基本上不太好。

_el_upload.click();
alert();

我认为“回调函数”或“等待函数”可以解决这个问题，但我无法处理它。

- Shamshirsaz.Navid

---

“它的外观没有正确地改变”是什么意思？你想做什么？ - gen_Eric

你需要使用<input>元素的onchange事件。在选择文件之前发生return _el_upload.files。 - gen_Eric

我正在测试“onchange”。 - Shamshirsaz.Navid

可能是 https://dev59.com/e3I-5IYBdhLWcg3wBjnk 的重复问题。 - Ray Nicholus

@RayNicholus：考虑使用警报：当调用警报时，代码将停止，直到警报结束；我希望这个功能也能用于“输入文件对话框”。 - Shamshirsaz.Navid

Answer 1

如果您想要样式化文件输入元素，请查看使用JavaScript打开文件对话框框。如果您想获取与文件输入元素相关联的文件，您必须执行此操作：

inputElement.onchange = function(event) {
   var fileList = inputElement.files;
   //TODO do something with fileList.  
}

请参考此 MDN 文章了解有关FileList类型的更多信息。

请注意，上面的代码仅在支持文件 API 的浏览器中有效。例如，在 IE9 及更早版本中，您只能访问文件名称。在不支持文件 API 的浏览器中，输入元素没有files属性。

- Ray Nicholus

Answer 2

基于 Ray Nicholus 的回答：

inputElement.onchange = function(event) {
   var fileList = inputElement.files;
   //TODO do something with fileList.  
}

使用这个也可以：

inputElement.onchange = function(event) {
   var fileList = event.target.files;
   //TODO do something with fileList.  
}

- Kevin Chandra

---

它也可以是 "event.currentTarget.files"。 - Luís Assunção

Answer 3

上面的答案已经足够详细了。除了使用 onChange 之外，如果您使用拖放事件上传文件，可以通过访问 eventArgs.dataTransfer.files 在 drop 事件中获取文件。

- Jeyanth