js图片上传实现

图片上传的基本实现

使用HTML的<input type="file">元素配合JavaScript的File API实现基础图片上传功能。HTML部分需要设置accept="image/*"限制文件类型为图片：

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

JavaScript部分通过FileReader读取并预览图片：

document.getElementById('uploader').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file.type.match('image.*')) return alert('请选择图片文件');

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

多图上传与预览

通过添加multiple属性支持多文件选择，利用循环处理文件列表：

<input type="file" id="multiUploader" accept="image/*" multiple>
<div id="gallery"></div>

JavaScript处理逻辑：

document.getElementById('multiUploader').addEventListener('change', function(e) {
  const gallery = document.getElementById('gallery');
  gallery.innerHTML = '';

  Array.from(e.target.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';
      gallery.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

图片压缩处理

使用Canvas API实现客户端图片压缩，减少上传流量消耗：

function compressImage(file, maxWidth = 800, quality = 0.7) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);

    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      let width = img.width;
      let height = img.height;
      if (width > maxWidth) {
        height *= maxWidth / width;
        width = maxWidth;
      }

      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);

      canvas.toBlob(resolve, 'image/jpeg', quality);
    };
  });
}

实际文件上传

通过FormData对象配合fetch或XMLHttpRequest实现文件上传：

async function uploadToServer(file) {
  const formData = new FormData();
  formData.append('image', file);

  try {
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });
    return await response.json();
  } catch (error) {
    console.error('上传失败:', error);
  }
}

进度显示与错误处理

XMLHttpRequest可提供上传进度监控：

function uploadWithProgress(file) {
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = (e) => {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${percent}%`);
  };

  xhr.onload = () => {
    if (xhr.status === 200) {
      console.log('上传成功');
    } else {
      console.error('上传出错');
    }
  };

  xhr.open('POST', '/upload', true);
  const formData = new FormData();
  formData.append('image', file);
  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>

<form action="/upload" class="dropzone"></form>

配置参数示例：

Dropzone.options.myDropzone = {
  paramName: "file",
  maxFilesize: 5, // MB
  acceptedFiles: "image/*",
  addRemoveLinks: true
};