JavaScript文件预览怎么实现

本文详解了如何利用HTML5的File API在前端实现图片、文本和PDF等常见文件类型的本地预览功能——无需上传服务器，即可通过FileReader将文件读取为base64或文本内容，并结合img、pre、embed等原生标签即时渲染，同时支持多文件选择与智能类型判断，显著提升用户交互体验与应用响应效率。

在现代Web应用中，用户上传文件前往往希望先预览内容，比如图片、PDF、文本文件等。JavaScript结合HTML5的File API可以高效实现本地文件的预览功能，无需上传到服务器即可查看文件内容。

1. 图片文件预览

通过FileReader读取用户选择的图片文件，并将其转换为base64格式的URL，赋值给标签的src属性，即可实现即时预览。

示例代码：

<input type="file" accept="image/*" id="imageInput">
<img id="preview" src="" alt="预览图" style="max-width: 300px; margin-top: 10px;">

<script>
document.getElementById('imageInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file && file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.onload = function(evt) {
      document.getElementById('preview').src = evt.target.result;
    };
    reader.readAsDataURL(file);
  }
});
</script>

2. 文本文件预览（txt、csv等）

使用FileReader读取文本类文件内容，将结果展示在<textarea>或中。</textarea>

实现方式：

• 监听文件输入变化，获取文件对象
• 调用readAsText方法读取内容
• 将结果插入页面指定区域

示例代码：

<input type="file" accept=".txt,.csv" id="textInput">
<pre id="textContent" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px; height: 200px; overflow: auto;">

3. PDF文件预览

浏览器原生支持PDF预览，可借助或