本文介绍如何使用 html 原生 `multiple` 属性配合 react 的受控/非受控输入，轻松实现用户一次性选择多个图片文件的功能，无需第三方库，兼容现代浏览器。

在 React 应用中，若需让用户一次选择多张照片，仅使用 是不够的——默认情况下它只允许单文件选择。解决方法非常简洁：为 添加 multiple 布尔属性即可启用多选能力。

✅ 正确写法（支持多图选择）：

 {
    const files = e.target.files; // FileList 对象，包含所有选中的文件
    if (files && files.length > 0) {
      console.log(`共选中 ${files.length} 张图片`);
      Array.from(files).forEach((file, index) => {
        console.log(`第 ${index + 1} 张:`, file.name, file.type, file.size);
      });
    }
  }}
/>

? 关键说明：

网趣购物系统精装版

精装版对原程序进行了大量的更新和调整，在安全性和实用性上均有重大突破，特色功能：完美整合支付宝功能，根据用户需求，并具有打开和关闭支付宝的功能!匿名用户购买功能，商城支持匿名直接购买商品功能，方便用户购物!增加了后台LOGO图片上传管理功能，管理简单、易用对广告管理进行扩充，所有广告图片、FLASH均可实现在线上传管理!多种在线支付方式，程序同时支持网银、西部支付，可自由选择切换!支持简繁互换显示

下载

• multiple 是原生 HTML 属性，React 中直接传入（无需 multiple={true}，布尔属性存在即生效）；
• accept=”image/*” 可限制文件类型，提升用户体验（但不可替代后端校验）；
• e.target.files 返回的是只读的 FileList 对象，需用 Array.from() 转为数组才能使用 map/forEach 等方法；
• 若需预览图片，可结合 URL.createObjectURL(file) 生成临时 URL；
• 注意： 在 React 中默认为非受控组件；如需完全受控（例如清空已选文件），需配合 value=””（但会带来额外复杂度，通常推荐非受控 + key 重置）。

? 小技巧：如需重置选择状态（例如“重新选择”按钮），可通过更新 input 的 key 强制重建 DOM 节点：

 setKey(prev => prev + 1)}>清除已选

总结：启用多图上传无需复杂封装，只需一行 multiple 属性 + 合理处理 FileList，即可快速、轻量、可靠地实现核心功能。

https://www.php.cn/faq/1964874.html