当使用 javascript 单击<a href> 链接时，有什么方法可以打开文件浏览对话框？它应该像普通的文件浏览按钮一样起作用，并给出响应中选择的文件的名称/列表。
【问题讨论】：
标签： javascript jquery
这是一个非 jQuery 解决方案。请注意，您不能只使用.click()，因为某些浏览器不支持它。
<script type="text/javascript">
function performClick(elemId) {
var elem = document.getElementById(elemId);
if(elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
elem.dispatchEvent(evt);
}
}
</script>
<a href="#" onclick="performClick('theFile');">Open file dialog</a>
<input type="file" id="theFile" />
【讨论】：
.click()所有现代浏览器（包括ie10）支持.click()方法jsfiddle.net/vnYVB。不要在 input type:file 上使用 display:none，因为这在 safari 上不起作用。要解决这个 safari 问题，您应该使用 position:fixed;top:-1000 隐藏 input type:file。 （我知道这是旧的，但这篇文章在搜索引擎中排名很高，可能会误导路人）
elem.dispatchEvent(...)而不是node.dispatchEvent(...)
使用这个。
<script>
function openFileOption()
{
document.getElementById("file1").click();
}
</script>
<input type="file" id="file1" style="display:none">
<a href="#" onclick="openFileOption();return;">open File Dialog</a>
【讨论】：
display: none 似乎不适用于 Safari。也许您应该将其放入带有overflow: hidden; 的div 并在输入上设置position: relative; top: -1000px？
这些答案中缺少的是如何在页面上没有输入元素的情况下获取文件对话框。
显示输入文件对话框的函数。
function openFileDialog (accept, callback) { // this function must be called from a user
// activation event (ie an onclick event)
// Create an input element
var inputElement = document.createElement("input");
// Set its type to file
inputElement.type = "file";
// Set accept to the file types you want the user to select.
// Include both the file extension and the mime type
inputElement.accept = accept;
// set onchange event to call callback when user has selected file
inputElement.addEventListener("change", callback)
// dispatch a click event to open the file dialog
inputElement.dispatchEvent(new MouseEvent("click"));
}
注意该功能必须是用户激活的一部分，例如点击事件。尝试在没有用户激活的情况下打开文件对话框将会失败。
注意
input.accept未在 Edge 中使用
当用户点击锚元素时调用上述函数。
// wait for window to load
window.addEventListener("load", windowLoad);
// open a dialog function
function openFileDialog (accept, multy = false, callback) {
var inputElement = document.createElement("input");
inputElement.type = "file";
inputElement.accept = accept; // Note Edge does not support this attribute
if (multy) {
inputElement.multiple = multy;
}
if (typeof callback === "function") {
inputElement.addEventListener("change", callback);
}
inputElement.dispatchEvent(new MouseEvent("click"));
}
// onload event
function windowLoad () {
// add user click event to userbutton
userButton.addEventListener("click", openDialogClick);
}
// userButton click event
function openDialogClick () {
// open file dialog for text files
openFileDialog(".txt,text/plain", true, fileDialogChanged);
}
// file dialog onchange event handler
function fileDialogChanged (event) {
[...this.files].forEach(file => {
var div = document.createElement("div");
div.className = "fileList common";
div.textContent = file.name;
userSelectedFiles.appendChild(div);
});
}.common {
font-family: sans-serif;
padding: 2px;
margin : 2px;
border-radius: 4px;
}
.fileList {
background: #229;
color: white;
}
#userButton {
background: #999;
color: #000;
width: 8em;
text-align: center;
cursor: pointer;
}
#userButton:hover {
background : #4A4;
color : white;
}<a id = "userButton" class = "common" title = "Click to open file selection dialog">Open file dialog</a>
<div id = "userSelectedFiles" class = "common"></div>警告上面的sn-p是用ES6写的。
【讨论】：
很遗憾，没有一种使用 JavaScript API 浏览文件的好方法。幸运的是，很容易在 JavaScript 中创建文件输入，将事件处理程序绑定到其change 事件，并模拟用户单击它。我们可以在不修改页面本身的情况下做到这一点：
$('<input type="file" multiple>').on('change', function () {
console.log(this.files);
}).click();
第二行的this.files 是一个包含文件名、时间戳、大小和类型的数组。
【讨论】：
这是一种无需任何 Javascript 即可实现的方法，它还与任何浏览器兼容。
编辑：在 Safari 中，input 在使用 display: none 隐藏时会被禁用。更好的方法是使用position: fixed; top: -100em。
<label>
Open file dialog
<input type="file" style="position: fixed; top: -100em">
</label>
此外，如果您愿意，可以通过在label 中使用for 指向输入的id 来采用“正确方式”，如下所示：
<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">
【讨论】：
position: fixed; top: -100em; 或margin-top: -2em 并在标签中包含overflow: hidden 将其隐藏起来。
你不能直接使用input.click()，但是你可以在其他元素点击事件中调用它。
html
<input type="file">
<button>Select file</button>
js
var botton = document.querySelector('button');
var input = document.querySelector('input');
botton.addEventListener('click', function (e) {
input.click();
});
这个告诉你Using hidden file input elements using the click() method
【讨论】：
我通过这个“隐藏”的 div 解决了这个问题......
<div STYLE="position:absolute;display:none;"><INPUT type='file' id='file1' name='files[]'></div>
【讨论】：
如何让点击a标签，点击文件按钮？
有更多的浏览器支持，但我使用 ES6，所以如果你真的想让它在旧的和任何浏览器中工作，尝试使用 babel 转译它，或者只是使用 ES5：
const aTag = document.getElementById("open-file-uploader");
const fileInput = document.getElementById("input-button");
aTag.addEventListener("click", () => fileInput.click());#input-button {
position: abosulte;
width: 1px;
height: 1px;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}<a href="#" id="open-file-uploader">Open file uploader</a>
<input type="file" id="input-button" />【讨论】：
我知道这是一篇旧文章，但另一个简单的选择是根据兼容性使用 INPUT TYPE="FILE" 标签大多数主要浏览器都支持此功能。
【讨论】：