首页 > 文章 > 前端

JS实现文件上传预览的5种方法，快来看看你都会吗？

时间：2025-06-19 13:14:22 170浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《JS实现文件上传预览，这5种方法你必须知道！》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

上传文件前预览的核心在于利用前端技术让用户提前查看文件内容以避免错误上传。1.使用FileReader API结合标签可实现图片预览；2.通过URL.createObjectURL()方法预览图片或视频，效率更高；3.针对PDF文件，可用pdf.js库解析并渲染到canvas；4.文本文件可通过FileReader读取后显示在textarea或pre标签中；5.复杂文档如Word可借助第三方库如docx.js实现预览。若图片预览模糊，可通过限制尺寸、Canvas重绘或服务器生成缩略图解决；大文件可采用分片读取、虚拟化或Web Worker处理；兼容性方面则使用Polyfill、特性检测和渐进增强策略确保多浏览器支持。这些方法有效提升了用户体验并减轻了服务器负担。

js如何实现文件上传预览上传前预览的5种实现技巧！

上传文件前预览，简单来说，就是让用户在真正上传之前，先看到他们选择的文件内容，比如图片、视频或者文档。这能避免传错文件，提升用户体验，也减轻服务器压力，毕竟传错了还得重新传嘛。

上传前预览的5种实现技巧！

最常见的：FileReader API + 标签（图片预览）
这是最经典的方式。FileReader 可以读取本地文件内容，然后通过标签展示图片。
```
const input = document.getElementById('fileInput');
const img = document.getElementById('previewImg');

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    img.src = e.target.result;
  }

  reader.readAsDataURL(file);
});
```
这段代码监听文件选择框的 change 事件，读取选择的文件，然后将读取到的 Data URL 设置为的 src 属性，就实现了图片预览。简单直接，但只能预览图片。
升级版：createObjectURL (也用于图片、视频预览)
URL.createObjectURL() 方法可以创建一个指向 Blob 或 File 对象的 URL。相比 FileReader，它更高效，因为它不需要读取整个文件到内存中。
```
const input = document.getElementById('fileInput');
const video = document.getElementById('previewVideo');

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  video.src = url;

  video.addEventListener('loadedmetadata', () => {
    URL.revokeObjectURL(url); // 释放资源
  });
});
```
这里展示了视频预览的例子，但同样适用于图片。 URL.revokeObjectURL() 很重要，用完要释放资源，否则会造成内存泄漏。

针对PDF：pdf.js (PDF预览)

如果需要预览PDF，就需要用到专门的库了。 pdf.js 是 Mozilla 提供的 PDF 解析渲染库。

// 假设你已经引入了 pdf.js
const input = document.getElementById('fileInput');

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const fileReader = new FileReader();

  fileReader.onload = function() {
    const typedarray = new Uint8Array(this.result);

    pdfjsLib.getDocument(typedarray).promise.then(function(pdf) {
      // 获取第一页
      pdf.getPage(1).then(function(page) {
        const viewport = page.getViewport({ scale: 1 });
        const canvas = document.getElementById('pdfCanvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      });
    });
  };

  fileReader.readAsArrayBuffer(file);
});

这段代码比较复杂，需要引入 pdf.js 库，然后读取 PDF 文件，解析 PDF 内容，最后渲染到 canvas 上。

简单的文本文件预览：FileReader API (文本预览)

对于简单的文本文件，可以直接使用 FileReader 读取文件内容，然后显示在一个 textarea 或者 pre 标签中。

const input = document.getElementById('fileInput');
const textarea = document.getElementById('previewText');

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    textarea.value = e.target.result;
  }

  reader.readAsText(file);
});

这种方式只能预览纯文本文件，对于复杂的文档格式，就无能为力了。

借助第三方库：例如docx.js (Word文档预览)
如果需要预览 Word 文档，就需要借助专门的库，比如 docx.js。它可以在浏览器端解析和渲染 Word 文档。
使用方式比较复杂，涉及到加载文档、解析文档结构、渲染文档内容等步骤，具体可以参考 docx.js 的官方文档。

为什么我上传的图片预览模糊？

图片预览模糊通常是因为预览图的尺寸小于实际上传的图片尺寸。浏览器为了快速显示预览图，会对图片进行压缩或缩放，导致图片质量下降。

解决方案：
- 限制预览图的最大尺寸： 可以通过 CSS 限制预览图的显示尺寸，但不要让它小于实际图片的尺寸。
- 使用 Canvas 重新绘制图片： 可以使用 Canvas 将原始图片绘制到指定尺寸的 Canvas 上，然后将 Canvas 的内容转换为 Data URL，作为预览图的 src。这样可以保证预览图的质量。
- 服务器端生成缩略图： 将图片上传到服务器后，由服务器生成缩略图，然后将缩略图的 URL 返回给客户端，作为预览图的 src。这种方式可以保证预览图的质量和性能。

如何处理大文件上传预览？

大文件上传预览可能会导致浏览器卡顿甚至崩溃。

解决方案：
- 分片读取： 将大文件分成多个小块，逐个读取并显示预览。可以使用 FileReader 的 readAsArrayBuffer 方法分片读取文件内容。
- 虚拟化： 只加载文件的部分内容进行预览，例如只加载视频的第一帧，或者只加载 PDF 的第一页。
- 使用 Web Worker： 将文件读取和预览的逻辑放在 Web Worker 中执行，避免阻塞主线程。

如何兼容各种浏览器？

不同的浏览器对 FileReader API 和 createObjectURL 方法的支持程度可能不同。

解决方案：
- 使用 Polyfill： 可以使用 Polyfill 来填补浏览器对某些 API 的缺失。
- 特性检测： 在使用某个 API 之前，先检测浏览器是否支持该 API。
- 渐进增强： 对于不支持某些 API 的浏览器，提供降级方案。例如，如果浏览器不支持 createObjectURL 方法，可以使用 FileReader API 代替。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

文件上传预览