JavaScript中input type file的change事件无法追加图片问题咨询

我来帮你搞定这个多图添加的问题，你的代码目前有几个小问题导致只能添加一次图片，我来逐一修正并给出完整方案：

问题分析 #

你的代码存在这几个核心问题：

• 只处理单个文件：你只取了e.target.files[0]（选中的第一个文件），没有遍历所有选中的文件，一次选多张也只会添加一张
• 图片路径无效：直接用文件名称作为img的src是不行的，浏览器出于安全限制，无法直接通过本地文件名访问图片，必须通过FileReader将文件转换为可预览的DataURL
• 重复选同文件不触发事件：当你选过一次文件后，再次选择相同文件时，file控件的value没有变化，不会触发change事件

修正后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row"></div>
<!-- 加上multiple属性，支持一次选择多张图片 -->
<input type="file" name="photo_input" multiple accept="image/*" />

<script>
$('[name=photo_input]').change(function (e) {
  // 将FileList转为数组，遍历所有选中的文件
  Array.from(e.target.files).forEach(file => {
    // 过滤非图片类型的文件
    if (!file.type.startsWith('image/')) return;
    
    const reader = new FileReader();
    reader.onload = function(event) {
      // 生成带预览的图片元素
      const imageElement = `
        <div class="col-md-4 mb-3">
          <img src="${event.target.result}" class="img-fluid" style="max-height: 200px;" />
        </div>
      `;
      $('.row').prepend(imageElement);
    };
    // 读取文件为DataURL，用于图片预览
    reader.readAsDataURL(file);
  });
  
  // 重置控件value，确保下次选相同文件也能触发change事件
  this.value = '';
});
</script>

关键改动说明 #

1. 给file控件添加multiple属性，支持一次选择多张图片；添加accept="image/*"，限制只能选择图片文件
2. 用Array.from(e.target.files)把FileList转为数组，遍历处理每个选中的文件
3. 增加图片类型校验，避免非图片文件被添加
4. 使用FileReader读取文件生成预览URL，确保图片能正常显示
5. 每次处理完后重置this.value = ''，解决重复选择相同文件不触发change事件的问题

内容的提问来源于stack exchange，提问作者Rohit Verma