PHP调用JS实现图片预览，上传前本地预览-php教程-PHP中文网

图片上传前预览必须由前端js实现，php无法直接调用js；核心是用filereader读取本地文件生成data url并赋值给img标签，php仅负责接收验证和保存。

php调用js实现图片预览，上传前本地预览

PHP本身不能直接调用JS实现上传前预览

这是个常见误解：PHP是服务端语言，JS运行在浏览器里，两者不处于同一执行环境。所谓“PHP调用JS”，实际是PHP生成HTML页面时，嵌入JS代码，由浏览器加载后执行。预览必须靠前端完成，PHP只负责后续的接收和保存。

关键点在于：图片预览完全不需要发请求、不经过PHP，纯前端用 FileReader 读取本地文件并转成 data URL，再塞进 <img> 的 src 属性即可。

容易踩的坑：

误以为要先用PHP接收文件再返回路径——这会导致额外请求、无法真正“上传前”预览
忽略的 multiple 属性与多图预览逻辑的匹配
没处理 FileReader 的 onerror 或大文件读取失败（比如超100MB）

用 FileReader + onchange 实现单图即时预览

最简可行方案：监听 <input type="file" accept="image/*"> 的 change 事件，读取第一个文件。

示例核心逻辑：

<input type="file" id="previewInput" accept="image/*">
@@##@@
<p><script>
document.getElementById('previewInput').onchange = function(e) {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;</script></p><p>const reader = new FileReader();
reader.onload = function() {
document.getElementById('previewImg').src = reader.result;
document.getElementById('previewImg').style.display = 'block';
};
reader.readAsDataURL(file); // 注意：不是 readAsText
};
</p>

注意点：

readAsDataURL 是必须的，readAsText 会乱码
Chrome/Firefox/Safari 均支持，IE10+ 也行，但 IE 不支持 accept="image/*" 过滤，需额外校验 file.type
不建议在 onload 外直接访问 reader.result——它只在加载完成后可用

多图预览需遍历 files 并动态创建 img 元素

如果 <input> 带了 multiple，e.target.files 是 FileList 对象，不是数组，不能直接用 forEach，得转一下。

jm-jsjkxyjs02-pzl-803

查询全球任意城市的实时天气和未来天气预报

下载

实操建议：

用 Array.from(e.target.files) 转为数组再遍历
每张图生成独立 <img id="previewImg" src="" alt="预览" style="max-width:90%">，避免复用同一个 DOM 节点导致预览错乱
限制预览数量（比如最多6张），防止用户选几百个文件卡死页面
可加 file.size 判断，跳过超大图（<code>FileReader 可能卡顿或失败）

错误现象举例：TypeError: Cannot read property 'length' of undefined —— 很可能是忘了检查 e.target.files.length > 0 就直接遍历。