jQuery change method on input type=file 监听

封面图 • 2025-11-10 • jQuery

在 jQuery 中，`change` 事件可以用来监听 `<input type="file">` 元素的文件选择变化。当用户选择了新的文件时，会触发 `change` 事件。

### 示例代码：

```html
<input type="file" id="fileInput">

if (files.length > 0) {
                var fileName = files[0].name;
                console.log('选中的文件名：' + fileName);
            }
        });
    });
</script>
```

---

### 注意事项：

1. **`change` 事件**：只在用户选择了新文件时触发，如果用户取消了选择（比如点击“取消”），不会触发。
2. **`this.files`**：是一个 `FileList` 对象，可以通过索引访问每个文件。
3. **多文件上传**：如果你使用了 `multiple` 属性，可以支持选择多个文件：

```html
<input type="file" id="fileInput" multiple>
```

然后在 JS 中处理所有选中的文件：

```javascript
$('#fileInput').on('change', function() {
    var files = this.files;
    for (var i = 0; i < files.length; i++) {
        console.log('文件名：' + files[i].name);
    }
});
```

---

### 总结：

| 方法 | 说明 |
|------|------|
| `change` | 监听文件选择变化 |
| `this.files` | 获取用户选择的文件列表 |
| `multiple` | 支持多文件选择 |

如需进一步处理上传或验证文件类型、大小等，可以在 `change` 事件中添加逻辑。需要的话我可以提供更详细的示例。