PHP中能否从$_FILES获取文件本地路径而非tmp_name实现上传前图片预览

你无法从$_FILES变量中提取到用户本地图片的真实存储路径，也不能直接用tmp_name作为img标签的src属性实现上传前预览。

原因说明 #

这是浏览器的强制安全策略：为了保护用户本地文件系统隐私，所有现代浏览器都会屏蔽文件的真实本地路径，无论是前端JS读取文件选择器的value值，还是服务端获取的$_FILES变量，都不可能拿到用户本地的真实存储路径。另外$_FILES中的tmp_name是文件上传到服务器后的临时存储路径，属于服务器本地的路径，完全无法被前端浏览器访问，自然不能直接作为img的src使用。

正确实现方案 #

上传前预览完全不需要依赖服务端处理，纯前端即可实现，操作步骤如下：

• 给文件选择input绑定change事件监听
• 事件触发时读取input的files属性，拿到用户选中的图片文件对象
• 使用URL.createObjectURL()接口将文件对象转换为可被img标签识别的临时资源链接，直接赋值给img的src属性即可完成预览

代码示例 #

<input type="file" id="imageUpload" accept="image/*">
<img id="preview" style="max-width: 400px; margin-top: 10px; display: none;">

const uploadEl = document.getElementById('imageUpload');
const previewEl = document.getElementById('preview');

uploadEl.addEventListener('change', () => {
  const file = uploadEl.files[0];
  // 校验是否为图片文件
  if (file && file.type.match('image.*')) {
    // 生成临时预览链接
    const previewUrl = URL.createObjectURL(file);
    previewEl.src = previewUrl;
    previewEl.style.display = 'block';
    // 图片加载完成后释放临时资源，避免内存占用
    previewEl.onload = () => URL.revokeObjectURL(previewUrl);
  }
});

特殊场景方案（必须经过服务端预览） #

如果你的业务场景要求必须经过服务端处理才能预览，可以按以下步骤操作：

• 服务端接收到上传文件后，将$_FILES中tmp_name对应的临时文件移动到服务器的公开可访问目录下
• 将该文件对应的公网访问URL返回给前端，赋值给img的src属性
• 预览完成后及时清理服务器上的临时文件，避免存储空间浪费

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