Layui如何实现多文件上传预览-Layui教程-PHP中文网

layui upload模块不支持原生多图预览，需在choose回调中用filereader逐个读取obj.files生成dataurl并插入标签，注意过滤非图片、限制数量与大小、避免内存溢出及兼容性问题。

layui upload 模块不支持原生多图预览，得自己补逻辑

layui 的 upload 模块默认只触发上传，不处理文件读取和预览。所谓“多文件上传预览”，本质是：选中文件 → 用 filereader 逐个读取 → 把 data url 赋给 <img> 标签。layui 不做这事，你得手动接上。

常见错误现象：upload.render() 配了 multiple: true，但界面上只看到上传按钮，没任何缩略图；或者点了“选择文件”后，choose 回调里没拿到 obj.files（其实是有的，只是没人读）。

必须在 choose 回调里遍历 obj.files，不能等 done —— 那时文件早发到服务器了
obj.files 是 FileList，不是数组，要用 Array.from() 或循环处理
每个 File 对象有 name、size、type，可用来过滤非图片（比如跳过 .pdf）
别在 choose 里直接调 obj.upload()，否则会立刻上传，失去预览时机

怎么把选中的多个图片转成预览图并插入页面

核心就是用 FileReader 同步读取每个文件的 DataURL，然后动态生成 <img> 插入容器。注意顺序和内存控制。

使用场景：用户点击“选择文件”，弹出系统对话框，选中 3 张 JPG，页面下方立即显示三张缩略图 + 删除按钮。

给预览区准备一个容器，比如 <div id="preview-box"></div>
在 choose 回调里清空旧预览：document.getElementById('preview-box').innerHTML = ''
对每个 file 实例化一个 FileReader，调用 readAsDataURL(file)
reader.onload 触发后，用 reader.result 创建 <img>，加 src 和自定义 data-index 方便后续删除
别用 for...of 直接遍历 obj.files 并在循环里 new FileReader —— 闭包容易导致所有图片都显示最后一个

// 示例片段（放在 choose 回调内）
Array.from(obj.files).forEach((file, i) => {
  if (!/image\/\w+/.test(file.type)) return;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    const img = document.createElement('img');
    img.src = reader.result;
    img.style.maxWidth = '120px';
    img.setAttribute('data-index', i);
    document.getElementById('preview-box').appendChild(img);
  };
});

为什么上传前预览常卡顿或崩溃

大图（比如 5MB 的 PNG）被 readAsDataURL 转成 base64 后，字符串体积膨胀约 33%，内存占用翻倍。10 张就可能撑爆浏览器堆栈，尤其低配设备。

性能影响：Chrome 下读取单张 8MP 图片平均耗时 150–300ms；10 张连续读，UI 线程明显卡顿，滚动失帧。

限制最大预览数量，比如最多显示 6 张：if (obj.files.length > 6) return layer.msg('最多预览 6 张')
限制单图大小，比如超过 2MB 就跳过预览（仍可上传）：if (file.size > 2 * 1024 * 1024) continue
不用 readAsDataURL，改用 createObjectURL(file) —— 内存更省、速度更快，但需手动 revokeObjectURL 防泄漏
预览图尺寸不必原图，可在 onload 后用 Canvas 压缩再生成 URL（进阶需求，非必须）