📁 文件上传控件实现多选方法
在日常开发中,我们经常需要实现“文件上传”功能,尤其是允许用户一次性上传多个文件的场景(比如批量上传头像、照片墙等)。这时,仅仅设置 type="file" 是不够的,必须配合 multiple 属性使用哦!🚀
💡 核心实现:multiple 属性
<input type="file"> 标签本身只允许选择单个文件。要实现多选,我们需要给这个标签加上 multiple 属性。
✅ 推荐写法(规范)
<input type="file" name="img" multiple="multiple" />
🌟 明确写明 multiple="multiple",这是 HTML5 规范中语义最清晰、兼容性最好的写法。无论浏览器如何,开发者意图都非常明确。
⚠️ 不推荐写法(避坑指南)
<input type="file" name="img" multiple />
⛔ 虽然很多现代浏览器能识别空值的 multiple,但这在语义上是不规范的。为了代码的整洁度和未来的兼容性,建议生产环境尽量采用规范写法。
🔍 为什么 multiple 这么重要?
当 multiple 属性生效时,浏览器的文件选择器(文件选择弹窗)行为会发生变化:
- 界面变化:弹出的文件选择对话框通常会有一个“按住 Ctrl/Cmd 点击多个文件”的提示,或者可以直接点击多选框来选择多个文件。
- 后端处理:前端会一次性将多个文件以数组(Array)的形式提交给后端服务器,后端需要做好循环处理或批量处理的逻辑哦。