如何使用javascript打开文件/浏览对话框？

当使用javascript单击

链接时，是否有办法打开“浏览文件”对话框？它的功能应该类似于普通的“浏览文件”按钮，并给出响应所选文件的名称/列表。

这里是一个非jQuery解决方案。注意：不能只使用

。单击（）

，因为某些浏览器不支持它

<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" />

功能performClick（elemId）{
var elem=document.getElementById（elemId）；
if（elem&&document.createEvent）{
var evt=document.createEvent（“MouseEvents”）；
evt.initEvent（“单击”，真，假）；
要素调度事件（evt）；
}
}

我知道这是一篇老文章，但另一个简单的选择是根据兼容性使用INPUT TYPE=“FILE”标记大多数主流浏览器都支持此功能。

使用此功能

<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>

函数openFileOption（）
{
document.getElementById（“文件1”）。单击（）；
}

我通过这个“隐藏”分区解决了这个问题

---

以下是一种不使用任何Javascript的方法，它还与任何浏览器兼容

---

编辑：在Safari中，当使用

display:none

隐藏时，

输入将被禁用。更好的方法是使用
position:fixed；顶部：-100em



打开文件对话框

此外，如果您愿意，您也可以使用
标签中的
for
，指向输入的
id
，如下所示：

文件对话框
您不能使用
输入。直接单击（）
，但您可以在其他元素单击事件中调用它

html

这告诉您
不幸的是，没有一种使用JavaScript API浏览文件的好方法。幸运的是，用JavaScript创建文件输入、将事件处理程序绑定到它的
change
事件并模拟用户点击它很容易。我们可以在不修改页面本身的情况下执行此操作：

$('<input type="file" multiple>').on('change', function () {
  console.log(this.files);
}).click();

$（''）.on（'change'，函数（）{
console.log（this.files）；
})。单击（）；

第二行的this.files
是一个数组，包含文件名、时间戳、大小和类型。
创建输入元素。
这些答案缺少的是如何在页面上没有输入元素的情况下获取文件对话框

显示“输入文件”对话框的函数

function openFileDialog（accept，callback）{//必须从用户调用此函数
//激活事件（即onclick事件）
//创建一个输入元素
var inputElement=document.createElement（“输入”）；
//将其类型设置为file
inputElement.type=“文件”；
//将accept设置为希望用户选择的文件类型。
//包括文件扩展名和mime类型
inputElement.accept=接受；
//将onchange事件设置为在用户选择文件时调用回调
addEventListener（“更改”，回调）
//发送单击事件以打开文件对话框
inputElement.dispatchEvent（新建鼠标事件（“单击”）；
}

注意该功能必须是用户激活的一部分，如单击事件。尝试在没有用户激活的情况下打开文件对话框将失败

注意
输入。接受
未在Edge中使用

例子。
当用户单击锚元素时调用上述函数


//等待窗口加载
window.addEventListener（“加载”，windowLoad）；
//打开一个对话框函数
函数openFileDialog（接受，multy=false，回调）{
var inputElement=document.createElement（“输入”）；
inputElement.type=“文件”；
inputElement.accept=accept；//注意边缘不支持此属性
如果（multy）{
inputElement.multiple=multy；
}
if（回调类型==“函数”）{
addEventListener（“更改”，回调）；
}
inputElement.dispatchEvent（新建鼠标事件（“单击”）；
}
//加载事件
函数windowLoad（）{
//将用户单击事件添加到用户按钮
userButton.addEventListener（“单击”，打开对话框单击）；
}
//用户按钮点击事件
函数openDialogClick（）{
//打开文本文件的文件对话框
openFileDialog（“.txt，文本/普通”，true，fileDialogChanged）；
}
//文件对话框onchange事件处理程序
函数fileDialogChanged（事件）{
[…this.files].forEach（文件=>{
var div=document.createElement（“div”）；
div.className=“文件列表公用”；
div.textContent=file.name；
userSelectedFiles.appendChild（div）；
});
}
.common{
字体系列：无衬线；
填充：2px；
保证金：2倍；
边界半径：4px；
}
.文件列表{
背景：#229；
颜色：白色；
}
#用户按钮{
背景：#999；
颜色：#000；
宽度：8em；
文本对齐：居中；
光标：指针；
}
#用户按钮：悬停{
背景：#4A4；
颜色：白色；
}
打开文件对话框
点击标签来点击文件按钮怎么样

这方面有更多的浏览器支持，但我使用的是ES6，因此如果您真的想让它在较旧的浏览器和任何浏览器中工作，请尝试使用babel对其进行传输，或者仅使用ES5：


const aTag=document.getElementById（“打开文件上传器”）；
const fileInput=document.getElementById（“输入按钮”）；
aTag.addEventListener（“单击”，（）=>fileInput.click（））
#输入按钮{
职位：Abosult；
宽度：1px；
高度：1px；
剪辑：rect（1px 1px 1px 1px）；
剪辑：rect（1px，1px，1px，1px）；
}
重要的是要注意，如果您这样做，然后使用javascript提交表单，例如form.submit（），您将获得一个访问被拒绝错误（2013），您可以使用
。click（）
所有现代浏览器（包括ie10）都支持
。click（）
方法。不要在
input type:file
上使用
display:none
，因为这在safari上不起作用。修理
<input type="file">
<button>Select file</button>

var botton = document.querySelector('button');
var input = document.querySelector('input');
botton.addEventListener('click', function (e) {
    input.click();
});

$('<input type="file" multiple>').on('change', function () {
  console.log(this.files);
}).click();