当前位置：首页 > JavaScript

js实现图片上传预览

2026-04-04 01:16:17JavaScript

实现图片上传预览的步骤

HTML部分
创建文件输入框和预览区域：

<input type="file" id="uploader" accept="image/*">
<div id="preview"></div>

JavaScript部分
监听文件输入变化并处理预览逻辑：

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

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

多图预览实现
通过循环处理多个文件：

document.getElementById('uploader').addEventListener('change', function(e) {
  const files = e.target.files;
  const preview = document.getElementById('preview');
  preview.innerHTML = '';

  Array.from(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';
      img.style.margin = '5px';
      preview.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

样式优化建议
添加CSS改善预览效果：

#preview img {
  border: 1px dashed #ccc;
  padding: 5px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

注意事项

文件类型需通过file.type验证
移动端需测试响应式表现
大文件建议添加加载状态提示

扩展功能实现

预览前尺寸校验
添加图片尺寸限制检查：

const img = new Image();
img.onload = function() {
  if (this.width > 1024 || this.height > 1024) {
    alert('图片尺寸不得超过1024x1024');
  } else {
    preview.appendChild(this);
  }
};
img.src = event.target.result;

Base64转Blob上传
转换预览图为可上传格式：

function dataURLtoBlob(dataurl) {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

拖拽上传支持
添加拖拽区域交互：

js实现图片上传预览

const dropArea = document.getElementById('preview');
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.classList.add('dragover');
});

dropArea.addEventListener('dragleave', () => {
  dropArea.classList.remove('dragover');
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.classList.remove('dragover');
  const files = e.dataTransfer.files;
  // 处理拖拽文件逻辑
});