js怎么实现预览

实现文件预览的方法

在JavaScript中实现文件预览功能，通常涉及读取用户上传的文件内容并将其显示在页面上。以下是几种常见的文件预览实现方式。

图片预览

使用FileReader对象读取图片文件并显示在页面上。

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file.type.match('image.*')) return;

  const reader = new FileReader();
  reader.onload = function(e) {
    preview.src = e.target.result;
  };
  reader.readAsDataURL(file);
});

文本文件预览

读取文本文件内容并显示在页面上。

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file.type.match('text.*')) return;

  const reader = new FileReader();
  reader.onload = function(e) {
    preview.textContent = e.target.result;
  };
  reader.readAsText(file);
});

PDF预览

使用第三方库（如PDF.js）实现PDF文件预览。

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file.type !== 'application/pdf') return;

  const reader = new FileReader();
  reader.onload = function(e) {
    const typedArray = new Uint8Array(e.target.result);
    pdfjsLib.getDocument(typedArray).promise.then(function(pdf) {
      pdf.getPage(1).then(function(page) {
        const viewport = page.getViewport({ scale: 1.0 });
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        preview.appendChild(canvas);
        page.render({
          canvasContext: context,
          viewport: viewport
        });
      });
    });
  };
  reader.readAsArrayBuffer(file);
});

视频/音频预览

直接使用URL.createObjectURL生成临时URL实现媒体文件预览。

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file.type.match('video.*') && !file.type.match('audio.*')) return;

  const url = URL.createObjectURL(file);
  preview.src = url;
});

注意事项

• 使用FileReader时要注意异步操作，确保在回调函数中处理结果。
• 对于大文件，考虑使用分块读取或流式处理避免内存问题。
• 使用第三方库预览特殊格式文件（如PDF、Office文档）时，需先引入相关库。
• 生成的临时URL（URL.createObjectURL）应及时释放（URL.revokeObjectURL）以避免内存泄漏。