当前位置：首页 > JavaScript

js怎么实现预览

2026-03-16 05:21:29JavaScript

实现文件预览的方法

使用JavaScript实现文件预览功能通常涉及文件读取和展示。以下是几种常见的实现方式：

使用FileReader读取文件 通过HTML5的FileReader API可以读取用户上传的文件内容并展示。

document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    const preview = document.getElementById('preview');
    if (file.type.match('image.*')) {
      preview.innerHTML = `<img src="${e.target.result}" />`;
    } else {
      preview.textContent = e.target.result;
    }
  };

  reader.readAsDataURL(file);
});

图片预览示例 对于图片文件，可以直接使用URL.createObjectURL生成临时URL进行预览。

function previewImage(input) {
  const preview = document.getElementById('imagePreview');
  if (input.files && input.files[0]) {
    const reader = new FileReader();
    reader.onload = function(e) {
      preview.src = e.target.result;
    };
    reader.readAsDataURL(input.files[0]);
  }
}

PDF预览方案 使用pdf.js库可以实现PDF文件的预览功能。

const loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    const viewport = page.getViewport({ scale: 1.0 });
    const canvas = document.getElementById('pdfCanvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    page.render({
      canvasContext: context,
      viewport: viewport
    });
  });
});

视频/音频预览 媒体文件可以直接使用HTML5的video/audio元素进行预览。

function previewMedia(file) {
  const url = URL.createObjectURL(file);
  if (file.type.match('video.*')) {
    document.getElementById('videoPreview').src = url;
  } else if (file.type.match('audio.*')) {
    document.getElementById('audioPreview').src = url;
  }
}

文本文件预览 对于文本文件，可以直接读取并显示内容。

js怎么实现预览

function previewText(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('textPreview').textContent = e.target.result;
  };
  reader.readAsText(file);
}