HTML | DOM 输入文件上传接受属性

在 HTML 中，可以通过 <input> 元素来创建文件上传控件。使用文件上传控件，用户可以通过选择本地文件来上传到服务器。但是，默认情况下，HTML 文件上传控件只能上传文件到服务器，如果想在客户端读取该文件，需要使用一些 JavaScript 技术。

为了帮助在客户端处理上传文件，HTML 提供了 accept 属性。使用 accept 属性可以指定文件上传控件所允许的文件类型，这样用户只能上传指定类型的文件。这可以避免上传错误的格式或危险的文件。

accept 属性

accept 属性定义了接受的文件类型。文件类型是通过 MIME 类型或者后缀名来指定的。可以使用逗号分隔多个类型。

以下两种方式都可以使用：

• 使用 MIME 类型：

  <input type="file" accept="image/*">
  

  上面代码中，文件上传控件仅接受图像类型的文件。MIME 类型以 image/ 为前缀，后面可以指定类型，如 jpg、png 等。

• 使用文件后缀名：

  <input type="file" accept=".jpg,.png">
  

  上面代码中，文件上传控件只接受 .jpg 和 .png 文件。

DOM 操作

JavaScript 中，我们可以通过 DOM 操作来访问文件上传控件和其属性。以下代码使用 querySelector() 方法获取文件上传控件，然后通过 accept 属性获取上传文件的类型：

const fileInput = document.querySelector('input[type="file"]');
console.log(fileInput.accept);

获取上传文件

文件上传控件允许用户选择一个或多个文件并将其上传到服务器。但是，由于安全原因，浏览器不支持 JavaScript 直接读取文件，因此我们必须使用 FileReader 对象来读取文件。

以下代码展示了如何监听文件上传控件的 change 事件，读取文件内容并将其显示在页面上：

const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  const reader = new FileReader();
  reader.readAsText(file);
  
  reader.onload = () => {
    const content = reader.result;
    const pre = document.createElement('pre');
    pre.textContent = content;
    document.body.appendChild(pre);
  }
});

上面代码中，我们使用 FileReader 对象读取了文件内容，并将其显示在一个 pre 元素中。需要注意的是，读取文件是一个异步操作，因此我们需要将读取文件的代码放在 onload 回调函数中。

结论

使用 accept 属性可以让文件上传控件仅接受指定类型的文件，避免上传错误的格式或危险的文件；通过 DOM 操作获取文件上传控件的属性；使用 FileReader 对象可以读取上传的文件内容。这些技术可以让开发者更好地管理上传的文件，并用 JavaScript 在客户端处理这些文件。