基本语法

element.addEventListener('change', function(event) {// 回调函数逻辑
});

• element：需要绑定事件的 HTML 元素，通常是文件输入框（<input type="file">）。
• change：事件类型，当输入框内容改变时触发。
• function(event)：事件触发后的回调函数。event 是事件对象，包含触发事件的相关信息。

---

文件选择事件的作用

对于 <input type="file"> 类型的元素，change 事件会在以下场景触发：

1. 用户通过文件选择框选择了一个或多个文件。
2. 用户清除了文件选择框中的内容（例如点击“取消”）。
3. 用户选择了与当前文件不同的文件（即“更改”了文件）。

---

event 对象的重要属性

在 change 事件中，event 对象包含有关文件选择的相关信息，常用属性如下：

1. event.target

event.target 指向触发事件的元素，即 <input type="file"> 元素。

javascript">const inputElement = event.target;

2. event.target.files

files 是一个 FileList 对象，包含用户选择的文件信息，可以通过索引访问：

javascript">const fileList = event.target.files;
const firstFile = fileList[0]; // 用户选择的第一个文件

3. File 对象

File 对象是文件列表中的每个文件的具体表示，包含以下常用属性：

• name：文件名称。
• size：文件大小（以字节为单位）。
• type：文件 MIME 类型（如 image/png、text/plain）。
• lastModified：文件的最后修改时间戳。

javascript">const file = event.target.files[0];
console.log(file.name);  // 输出文件名
console.log(file.size);  // 输出文件大小

---

应用示例

1. 简单文件选择监听器

javascript"><input type="file" id="fileInput" />
<script>document.getElementById('fileInput').addEventListener('change', function(event) {const file = event.target.files[0]; // 获取第一个文件if (file) {console.log(`文件名: ${file.name}`);console.log(`文件大小: ${file.size} 字节`);console.log(`文件类型: ${file.type}`);} else {console.log('未选择任何文件');}});
</script>

2. 读取文件内容并显示

javascript"><input type="file" id="fileInput" />
<script>document.getElementById('fileInput').addEventListener('change', function(event) {const file = event.target.files[0];if (file) {const reader = new FileReader(); // 创建 FileReader 实例reader.onload = function(e) {console.log('文件内容：', e.target.result); // 打印文件内容};reader.onerror = function(e) {console.error('文件读取错误:', e.target.error);};reader.readAsText(file); // 以文本形式读取文件内容} else {console.log('未选择任何文件');}});
</script>

3. 允许选择多个文件

javascript"><input type="file" id="fileInput" multiple />
<script>document.getElementById('fileInput').addEventListener('change', function(event) {const files = event.target.files; // 获取文件列表for (let i = 0; i < files.length; i++) {console.log(`文件${i + 1}: ${files[i].name} (${files[i].size} 字节)`);}});
</script>

---

常见注意事项

1. 多文件选择时的处理：

   • 如果 <input> 的 multiple 属性存在，用户可以选择多个文件。此时，files 是一个包含所有选中文件的列表，需要用循环逐个处理。

2. 文件读取的编码问题：

   • 使用 FileReader.readAsText(file, encoding) 读取文件时，确保正确指定编码（如 UTF-8 或 GB2312）。

3. 文件大小限制：

   • 文件上传通常有大小限制，可以通过 file.size 过滤过大的文件：

     javascript">if (file.size > 10 * 1024 * 1024) { // 限制10MBalert('文件过大，无法上传');
     }
     

4. 类型验证：

   • 可以使用 file.type 检查 MIME 类型，确保用户上传的是支持的文件类型：

     javascript">if (!['image/png', 'image/jpeg'].includes(file.type)) {alert('只支持 PNG 和 JPEG 图片');
     }
     

---

总结

addEventListener('change', ...) 是处理文件输入的关键，用于响应用户选择文件的操作。结合 FileReader 和文件属性（如 name、size、type），可以轻松实现文件读取、类型验证、大小过滤等功能。