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



Answers

用这个。

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

当使用javascript单击<a href>链接时,有没有办法打开浏览文件对话框? 它应该像普通的文件浏览按钮一样工作,并给出响应中选择的文件的名称/列表。




你不能直接使用input.click() ,但你可以在其他元素点击事件中调用它。

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

这告诉你使用click()方法使用隐藏文件输入元素




这是一种没有任何Javascript的方式,它也兼容任何浏览器。

编辑:在Safari中,当使用display: none隐藏时, input将被禁用。 更好的方法是使用position: fixed; top: -100em position: fixed; top: -100em

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

此外,如果您愿意,可以通过在指向输入idlabel使用for来执行“正确的方式” ,如下所示:

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">



我通过这个“隐藏”的div来解决它...

<div STYLE="position:absolute;display:none;"><INPUT type='file' id='file1' name='files[]'></div>





Links