JavaScript 中怎么监听文件上传表单的选中事件-js教程-PHP中文网

监听的change事件是获取用户选中文件的最可靠方式，它在用户确认选择后触发，通过event.target.files可访问filelist对象，支持多选和跨平台兼容。

javascript 中怎么监听文件上传表单的选中事件

在 JavaScript 中监听文件上传表单的“选中文件”事件，核心是监听 `` 元素的 change 事件。它会在用户通过文件选择对话框确认选中文件（包括取消后重新打开再选）时触发，且能可靠获取到所选文件列表。

监听 change 事件获取文件

这是最常用、最可靠的方式：

change 事件只在用户真正完成选择（点击“打开”或“确定”）后触发，不会因聚焦、点击等误触发；
通过 event.target.files 可拿到 FileList 对象，其中每个项都是 File 实例（继承自 Blob）；
支持多选（需加 multiple 属性），files 是类数组，可用 [...files] 转为数组操作。

示例：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

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

const input = document.getElementById('upload');
input.addEventListener('change', function (e) {
  const files = e.target.files; // FileList
  if (files.length === 0) return;
  
  console.log('选中了', files.length, '个文件');
  Array.from(files).forEach(file => {
    console.log(file.name, file.size, file.type);
  });
});