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

【问题标题】：how to get files from <input type='file' .../> (Indirect) with javascript如何使用 javascript 从 <input type='file' .../> (间接) 获取文件
【发布时间】：2013-03-25 08:25:31
【问题描述】：

我在非 IE 浏览器中遇到“输入标签”问题

<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();

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

【问题讨论】：

its appearance does not change correctly 是什么意思，你想做什么？
你需要使用<input>元素的onchange事件。 return _el_upload.files 发生在您选择文件之前。
hi @RocketHazmat thx 回复：我正在尝试在我的 CMS 中制作我自己的 UI，但我对的设计有疑问；我不想在名为“文件上传”的按钮附近看到一个文本框
我正在测试“onchange”
stackoverflow.com/questions/2048026/… 可能重复。

标签： javascript html

【解决方案1】：

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

【讨论】：

【解决方案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.  
}

【讨论】：

也可以是“event.currentTarget.files”。

【解决方案3】：

如果您正在寻找文件输入元素的样式，请查看open file dialog box in javascript。如果您要获取与文件输入元素关联的文件，则必须执行以下操作：

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

有关FileList 类型的更多信息，请参阅this MDN article。

请注意，以上代码仅适用于支持 File API 的浏览器。例如，对于 IE9 和更早版本，您只能访问文件名。输入元素在非文件 API 浏览器中没有 files 属性。

【讨论】：