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

Posted 2023-02-18

【中文标题】如何使用 javascript 打开文件/浏览对话框？

【英文标题】：How to open a file / browse dialog using javascript?

【发布时间】：2011-09-21 17:59:07

【问题描述】：

当使用 javascript 单击<a href> 链接时，有什么方法可以打开文件浏览对话框？它应该像普通的文件浏览按钮一样起作用，并给出响应中选择的文件的名称/列表。

【问题讨论】：

你也可以试试这个：code.google.com/p/upload-at-click

函数不是限制文件扩展名所必需的

【参考方案1】：

这是一个非 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" />

【讨论】：

重要的是要注意，如果你这样做，然后使用 javascript 提交表单，例如form.submit() 你会得到一个 access is denied 错误

(2013) 你可以使用.click()所有现代浏览器（包括ie10）支持.click()方法jsfiddle.net/vnYVB。不要在 input type:file 上使用 display:none，因为这在 safari 上不起作用。要解决这个 safari 问题，您应该使用 position:fixed;top:-1000 隐藏 input type:file。 （我知道这是旧的，但这篇文章在搜索引擎中排名很高，可能会误导路人）

我错了还是应该是elem.dispatchEvent(...)而不是node.dispatchEvent(...)

Encase 其他任何人都有这个问题，似乎至少某些浏览器/操作系统需要用户启动的事件在调用堆栈中才能触发。所以手动调用它（甚至在控制台中）是行不通的。

【参考方案2】：

使用这个。

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

【参考方案3】：

创建输入元素。

这些答案中缺少的是如何在页面上没有输入元素的情况下获取文件对话框。

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

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写的。}

【参考方案4】：

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

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

第二行的this.files 是一个包含文件名、时间戳、大小和类型的数组。

【参考方案5】：

这是一种无需任何 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">

【讨论】：

@Stuffix 我读它是因为 Safari 会阻止隐藏输入工作。解决方法是使用position: fixed; top: -100em; 或margin-top: -2em 并在标签中包含overflow: hidden 将其隐藏起来。

【参考方案6】：

你不能直接使用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

【参考方案7】：

我通过这个“隐藏”的 div 解决了这个问题......

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

【参考方案8】：

如何让点击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" />

【参考方案9】：

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

【讨论】：

这不是问题要问的

这是常用的方式，但问题是在不显示输入类型文件的情况下以“第三方”方式打开它。