当前位置：首页 > JavaScript

js实现预览

2026-04-03 19:26:46JavaScript

实现图片预览功能

使用FileReader对象读取文件并生成预览URL。以下是基于用户选择文件的预览实现：

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

  const reader = new FileReader();
  reader.onload = function(event) {
    const img = document.createElement('img');
    img.src = event.target.result;
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
});

多文件预览处理

通过循环处理多个文件的选择：

const previewContainer = document.getElementById('preview-container');
document.getElementById('multi-file').addEventListener('change', function(e) {
  previewContainer.innerHTML = '';
  Array.from(e.target.files).forEach(file => {
    if (!file.type.match('image.*')) return;

    const reader = new FileReader();
    reader.onload = function(event) {
      const img = document.createElement('img');
      img.src = event.target.result;
      img.style.maxWidth = '200px';
      previewContainer.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

视频预览实现

处理视频文件的预览需要检查视频类型：

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

  const video = document.createElement('video');
  video.controls = true;
  video.src = URL.createObjectURL(file);
  video.style.maxWidth = '500px';
  document.body.appendChild(video);
});

拖放预览功能

实现拖放区域的预览功能：

const dropArea = document.getElementById('drop-area');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

dropArea.addEventListener('drop', function(e) {
  const dt = e.dataTransfer;
  const files = dt.files;
  handleFiles(files);
});

function handleFiles(files) {
  Array.from(files).forEach(file => {
    const reader = new FileReader();
    reader.onload = function(event) {
      const preview = document.createElement('div');
      preview.className = 'preview-item';
      preview.innerHTML = `<img src="${event.target.result}" style="max-width: 150px;">`;
      dropArea.appendChild(preview);
    };
    reader.readAsDataURL(file);
  });
}

预览样式优化

为预览元素添加基本样式：

.preview-item {
  display: inline-block;
  margin: 10px;
  position: relative;
}

.preview-item img {
  max-height: 150px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
}

#drop-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}

文件类型验证

在预览前验证文件类型：

function isValidFileType(file) {
  const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'video/mp4'];
  return validTypes.includes(file.type);
}

document.getElementById('file-input').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!isValidFileType(file)) {
    alert('请选择有效的图片或视频文件');
    return;
  }
  // 处理预览逻辑
});

预览清理功能

添加清除预览的按钮功能：

js实现预览

document.getElementById('clear-preview').addEventListener('click', function() {
  document.getElementById('preview-container').innerHTML = '';
  document.getElementById('file-input').value = '';
});

标签: js