js实现多张

JavaScript实现多张图片上传

使用HTML5的File API和FormData对象实现多张图片上传

<input type="file" id="imageUpload" multiple accept="image/*">
<button id="uploadBtn">上传图片</button>

document.getElementById('uploadBtn').addEventListener('click', function() {
  const files = document.getElementById('imageUpload').files;
  if (files.length === 0) return;

  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append('images[]', files[i]);
  }

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log('上传成功', data))
  .catch(error => console.error('上传失败', error));
});

预览多张图片

在上传前预览选中的图片

const fileInput = document.getElementById('imageUpload');
const previewContainer = document.createElement('div');
document.body.appendChild(previewContainer);

fileInput.addEventListener('change', function() {
  previewContainer.innerHTML = '';
  Array.from(this.files).forEach(file => {
    if (!file.type.match('image.*')) return;

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

限制上传图片数量和大小

添加验证逻辑控制上传条件

function validateFiles(files) {
  const maxSize = 5 * 1024 * 1024; // 5MB
  const maxCount = 10;

  if (files.length > maxCount) {
    alert(`最多上传${maxCount}张图片`);
    return false;
  }

  for (let file of files) {
    if (file.size > maxSize) {
      alert(`${file.name}超过大小限制`);
      return false;
    }
  }

  return true;
}

显示上传进度

使用XMLHttpRequest显示上传进度

function uploadWithProgress(files) {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();

  files.forEach(file => formData.append('images[]', file));

  xhr.upload.addEventListener('progress', function(e) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${percent}%`);
  });

  xhr.open('POST', '/upload');
  xhr.send(formData);
}

使用第三方库简化操作

使用Dropzone.js实现拖拽上传

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

<div id="myDropzone" class="dropzone"></div>

Dropzone.options.myDropzone = {
  url: "/upload",
  paramName: "images",
  maxFilesize: 5, // MB
  acceptedFiles: "image/*",
  addRemoveLinks: true,
  parallelUploads: 3,
  init: function() {
    this.on("success", function(file, response) {
      console.log("文件上传成功", file.name);
    });
  }
};