JavaScript 函数打开文件浏览器

在网页开发中，我们经常需要让用户通过浏览器选择本地文件并上传到服务器上。在 JavaScript 中，我们可以通过调用浏览器提供的文件选择框来实现这个功能。本文将介绍如何通过 JavaScript 函数打开文件浏览器。

HTML

首先，我们需要在 HTML 中添加一个用于触发文件选择框的元素。可以使用 <input type="file"> 标签来创建一个文件选择框，如下：

<input type="file" id="file-selector">

我们还可以为该元素指定一些属性，例如：允许选择多个文件、仅限选择特定类型的文件等等。具体的，可以查看相关文档。

JavaScript

接下来，我们需要编写一个 JavaScript 函数来触发文件选择框。我们使用 addEventListener 来为元素添加 change 事件的监听器，这样每次选择文件后都会触发该事件。

function openFileChooser() {
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
    // 其它操作
  });
  fileSelector.click();
}

我们先获取到文件选择框元素，然后为它添加 change 事件监听器，并在回调函数中获取到用户选择的文件列表。最后，我们调用 click 方法触发文件选择框。这时候，浏览器就会弹出文件选择框，让用户选择文件了。

完整代码

下面是完整的 JavaScript 代码：

function openFileChooser() {
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
    // 其它操作
  });
  fileSelector.click();
}

在 HTML 中，我们需要添加一个用于触发函数的按钮：

<button onclick="openFileChooser()">选择文件</button>

结语

本文介绍了如何通过 JavaScript 函数打开文件浏览器。中间介绍了元素及 JavaScript 中的一些函数，代码简洁，易于理解。希望对你有所帮助！