Html 如何使用javascript从<input type='file' .../>（间接）获取文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15791279/
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
how to get files from <input type='file' .../> (Indirect) with javascript
提问by Shamshirsaz.Navid
I have problem with "input tag" in non IE browsers
我在非 IE 浏览器中遇到“输入标签”问题
<input type="file" ...
I'm trying to write my uploader , just using javascript and asp.net.
我正在尝试编写我的上传器，只是使用 javascript 和 asp.net。
I have no problem uploading files.
我上传文件没有问题。
My problem occured When I wanted to get my files in non IE browsers with
当我想在非 IE 浏览器中获取我的文件时出现我的问题
<input type="file" ...
I do not want to use directly from inputbecause its appearance does not change correctly
我不想直接使用 frominput因为它的外观没有正确改变
I wrote this code to get files from hard disk :
我写了这段代码来从硬盘获取文件：
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;
}
In IE it works pretty well and returns my files currently ; In Chrome And Firefox , After loading "file input dialog" , it can't return any file. And Opera and Safari are completely out.
在 IE 中，它运行良好，目前返回我的文件；在 Chrome 和 Firefox 中，加载“文件输入对话框”后，无法返回任何文件。Opera 和 Safari 已经完全淘汰了。
I can fix it with this trick , but its not good basically.
我可以用这个技巧修复它，但它基本上不好。
_el_upload.click();
alert();
I think "callback" or "wait function" may fix this , but i can't handle it.
我认为“回调”或“等待功能”可能会解决这个问题，但我无法处理。
回答by Ray Nicholus
If you are looking to style a file input element, look at open file dialog box in javascript. If you are looking to grab the files associated with a file input element, you must do something like this:
如果您要设计文件输入元素的样式，请查看javascript 中的打开文件对话框。如果您要获取与文件输入元素关联的文件，则必须执行以下操作：
inputElement.onchange = function(event) {
var fileList = inputElement.files;
//TODO do something with fileList.
}
See this MDN articlefor more info on the FileListtype.
有关该FileList类型的更多信息，请参阅此 MDN 文章。
Note that the code above will only work in browsers that support the File API. For IE9 and earlier, for example, you only have access to the file name. The input element has no filesproperty in non-File API browsers.
请注意，上面的代码仅适用于支持 File API 的浏览器。例如，对于 IE9 及更早版本，您只能访问文件名。input 元素files在非文件 API 浏览器中没有属性。
回答by Kevin Chandra
Based on Ray Nicholus's answer :
基于 Ray Nicholus 的回答：
inputElement.onchange = function(event) {
var fileList = inputElement.files;
//TODO do something with fileList.
}
using this will also work :
使用这个也可以：
inputElement.onchange = function(event) {
var fileList = event.target.files;
//TODO do something with fileList.
}
回答by Jeyanth
Above answers are pretty sufficient. Additional to the onChange, if you upload a file using drag and drop events, you can get the file in dropevent by accessing eventArgs.dataTransfer.files.
上面的答案已经足够了。除了onChange，如果您使用拖放事件上传文件，您可以drop通过访问eventArgs.dataTransfer.files.
