前端手写一个图片上传功能，需要支持多选

在前端编写一个支持多选图片的上传功能，你可以使用HTML5的File API配合JavaScript来实现。以下是一个基本的步骤和代码示例：

1. HTML结构：

<input type="file" id="image-input" multiple accept="image/*" />
<button id="upload-button">上传</button>
<div id="preview"></div> <!-- 可视化预览区域 -->

2. JavaScript处理：

// 获取DOM元素
const input = document.getElementById('image-input');
const uploadButton = document.getElementById('upload-button');
const previewArea = document.getElementById('preview');

// 监听文件输入事件
input.addEventListener('change', handleFiles);

function handleFiles(e) {
  const files = e.target.files; // 获取用户选择的文件列表

  // 渲染预览
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    previewArea.innerHTML += `<img src="${URL.createObjectURL(file)}" alt="${file.name}" />`;
  }

  // 上传函数，假设这里的上传API是异步的，实际使用时请替换为真实上传逻辑
  uploadFiles(files);
}

function uploadFiles(files) {
  // 模拟发送到服务器，实际上应该是AJAX或fetch请求
  for (let i = 0; i < files.length; i++) {
    const formData = new FormData();
    formData.append('files[]', files[i]);
    // 这里只是模拟，需要替换为真实的上传回调
    setTimeout(() => {
      console.log(`Uploading ${files[i].name}`);
    }, 1000); // 模拟上传延迟
  }
}

在这个示例中，用户可以选择多个图片，它们会在预览区显示出来。当点击“上传”按钮时，会触发`uploadFiles`函数，将选定的文件作为FormData的一部分发送到服务器。