如何在HTML中通过iframe标签预览本地上传的文件-html教程-PHP中文网

不能。现代浏览器禁止 iframe 直接加载 file:// 路径，需通过 FileReader 读取用户选择的文件并生成 Blob URL 赋值给 src；仅支持 PDF、图片、HTML 等原生可渲染格式，且须正确设置 MIME 类型与读取方式。

如何在html中通过iframe标签预览本地上传的文件

iframe 能直接加载本地 file:// 路径吗？

不能。现代浏览器出于安全限制，iframe 的 src 属性无法直接指向 file:// 本地路径（比如 file:///Users/xxx/resume.pdf），会触发跨域错误或直接空白，控制台通常报 Not allowed to load local resource。

用 FileReader + Blob URL 替代 src 属性

必须绕过直接写路径的思路，把文件读成二进制后生成临时内存 URL，再赋给 iframe.src。这是唯一可靠且兼容主流浏览器的方式。

只支持用户通过显式选择的文件，不能自动读取任意本地路径
读取成功后调用 URL.createObjectURL(file)，返回一个以 blob: 开头的临时地址
该 URL 仅在当前页面生命周期内有效，页面关闭后失效；不用时建议手动调用 URL.revokeObjectURL() 释放内存
对 PDF、图片、HTML 等浏览器原生支持渲染的格式有效；纯文本或 Word 文件不会渲染，需额外处理

const input = document.querySelector('input[type="file"]');
const iframe = document.querySelector('iframe');

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const url = URL.createObjectURL(file);
  iframe.src = url;

  // 清理：切换文件时释放前一个 URL
  iframe.addEventListener('load', () => {
    if (iframe._prevUrl) URL.revokeObjectURL(iframe._prevUrl);
    iframe._prevUrl = url;
  }, { once: true });
});

PDF 预览常见失败原因

即使用了 Blob URL，PDF 在 iframe 中仍可能空白或报错，主要因为：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

某些浏览器（如 Safari）对 application/pdf MIME 类型的 Blob URL 支持不稳定，可尝试显式设置 type 属性：new Blob([arrayBuffer], { type: 'application/pdf' })
Chrome 95+ 默认禁用 PDF 插件式渲染，若 iframe 内显示“PDF 损坏”或白屏，检查是否误将 PDF 当作文本读取 — 必须用 readAsArrayBuffer()，而非 readAsText()
部分企业内网环境启用了 PDF 下载策略，会拦截 inline 渲染，此时 iframe 会触发下载而非预览