当前位置：首页 > JavaScript

js实现预览

2026-01-13 14:33:54JavaScript

文件上传预览实现

使用JavaScript实现文件上传预览功能，可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览：

js实现预览

// HTML部分需要包含input和预览容器
<input type="file" id="fileInput" multiple>
<div id="previewContainer"></div>

// JavaScript实现
document.getElementById('fileInput').addEventListener('change', function(e) {
  const files = e.target.files;
  const previewContainer = document.getElementById('previewContainer');
  previewContainer.innerHTML = '';

  Array.from(files).forEach(file => {
    const reader = new FileReader();

    reader.onload = function(e) {
      let previewElement;

      if (file.type.match('image.*')) {
        previewElement = document.createElement('img');
        previewElement.src = e.target.result;
        previewElement.style.maxWidth = '200px';
        previewElement.style.maxHeight = '200px';
      } 
      else if (file.type === 'application/pdf') {
        previewElement = document.createElement('iframe');
        previewElement.src = e.target.result;
        previewElement.style.width = '200px';
        previewElement.style.height = '200px';
      }
      else if (file.type.match('text.*')) {
        previewElement = document.createElement('pre');
        previewElement.textContent = e.target.result;
      }
      else {
        previewElement = document.createElement('div');
        previewElement.textContent = `不支持预览: ${file.name}`;
      }

      previewContainer.appendChild(previewElement);
    };

    reader.readAsDataURL(file);
  });
});

图片裁剪预览实现

对于图片上传后的裁剪预览，可以使用cropper.js库：

js实现预览

// 引入Cropper.js库后
const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 1,
  viewMode: 1,
  autoCropArea: 0.8,
  ready() {
    this.cropper.setCropBoxData({
      width: 200,
      height: 200
    });
  }
});

// 获取裁剪结果
document.getElementById('cropBtn').addEventListener('click', function() {
  const croppedCanvas = cropper.getCroppedCanvas();
  const preview = document.getElementById('preview');
  preview.src = croppedCanvas.toDataURL('image/jpeg');
});

视频预览实现

对于视频文件上传预览：

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

  const videoPreview = document.getElementById('videoPreview');
  videoPreview.src = URL.createObjectURL(file);
  videoPreview.controls = true;
  videoPreview.style.maxWidth = '400px';
});

多文件预览优化

对于多文件预览的性能优化：

// 使用URL.createObjectURL替代FileReader
function createPreview(file) {
  const preview = document.createElement('div');
  preview.className = 'preview-item';

  if (file.type.match('image.*')) {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(file);
    preview.appendChild(img);
  }
  // 其他类型处理...

  // 记得在不需要时释放内存
  preview.addEventListener('load', () => {
    URL.revokeObjectURL(img.src);
  });

  return preview;
}

以上代码提供了常见的文件预览实现方式，可根据实际需求进行调整和扩展。对于大型文件预览，建议添加文件大小限制和加载状态提示。

标签: js