多文件input[type="file"]获取图片URL及预览问题排查

看起来你在实现多文件上传图片预览时碰到了小麻烦——明明选了图片，input.files却显示长度为0，还不知道怎么遍历生成批量预览图。我来帮你一步步解决这个问题：

先排查input.files为空的可能原因 #

你提到的input.files显示length:0但实际选了文件，大概率是这两个原因之一：

• 自定义上传组件的自动重置：你的input是隐藏式的（opacity:0），很可能是用了自定义上传按钮组件，这类组件有时会在文件选择后立刻重置input的value（为了允许再次选择相同文件），导致files被清空。解决思路是确保在重置input前先读取文件列表。
• 事件触发时机问题：虽然你用了事件委托，但如果input是动态生成的，要确保绑定事件时DOM已经加载完成（可以把代码放在$(document).ready()里）。

完整的多文件预览实现代码 #

下面是修复后的完整代码，包含文件读取、遍历生成预览图的逻辑，同时解决上述可能的问题：

HTML部分（需要一个预览容器） #

<!-- 预览图片的容器 -->
<div id="additional-images-preview-wrap" style="display:flex; gap:10px; margin-top:10px;"></div>

<!-- 你的多文件上传input -->
<input id="html5_1dseu9ccnu7a19ag13lc1j7a1nj33" 
       type="file" 
       multiple 
       accept="image/jpeg,.jpg,image/png,.png" 
       class="additional-images-input" 
       style="font-size: 999px; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;">

JavaScript部分 #

// 确保DOM加载完成后执行代码
$(document).ready(function() {
  // 多文件预览处理函数
  function read_multi_file_input(input) {
    // 先校验输入合法性
    if (!input || !input.files || input.files.length === 0) {
      console.log("未选择文件或无法读取文件列表");
      return;
    }

    const previewContainer = $('#additional-images-preview-wrap');
    // 可选：清空之前的预览（如果需要保留历史预览可以删除这行）
    previewContainer.empty();

    // 将FileList类数组转为数组，方便遍历
    Array.from(input.files).forEach(file => {
      // 过滤非图片文件
      if (!file.type.includes('image/')) {
        console.log(`跳过非图片文件：${file.name}`);
        return;
      }

      const reader = new FileReader();
      reader.onload = function(e) {
        // 创建预览img标签并添加到容器
        const previewImg = $('<img>')
          .addClass('additional-image-preview-thumb')
          .attr('src', e.target.result)
          .css({width: '100px', height: '100px', objectFit: 'cover', border: '1px solid #eee'});
        
        previewContainer.append(previewImg);
      };

      // 读取文件为DataURL
      reader.readAsDataURL(file);
    });
  }

  // 绑定多文件input的change事件
  $(document).on("change", ".additional-images-input", function() {
    // 先打印文件列表确认是否能获取到
    console.log("当前选择的文件：", this.files);
    read_multi_file_input(this);

    // 如果是组件自动重置input导致的问题，可以在这里手动备份文件后再重置（如果需要）
    // 比如：const files = [...this.files]; 之后再重置this.value = "";
  });
});

关键知识点说明 #

• FileList遍历：input.files是类数组对象，不能直接用数组的forEach方法，需要用Array.from()或者扩展运算符[...input.files]转换为数组后再遍历。
• 文件类型校验：通过file.type.includes('image/')过滤非图片文件，避免无效文件的处理。
• 预览图创建：每个文件对应一个FileReader实例，读取完成后生成独立的img标签添加到预览容器中。

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