js+css+ajax 多图片一次上传

要实现多图片一次性上传，可以使用JavaScript结合Ajax来完成。以下是一个简单的实现示例：

HTML部分：

<input type="file" id="multi-image-upload" multiple>
<button onclick="uploadImages()">上传</button>
<div id="upload-status"></div>

JavaScript部分（使用Fetch API进行Ajax请求）：

function uploadImages() {
  const input = document.getElementById('multi-image-upload');
  const files = input.files;
  const formData = new FormData();
 
  for (let i = 0; i < files.length; i++) {
    formData.append('image', files[i]);
  }
 
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    document.getElementById('upload-status').innerText = '上传成功';
    console.log(data);
  })
  .catch(error => {
    document.getElementById('upload-status').innerText = '上传失败';
    console.error('Error:', error);
  });
}

这里的/upload是服务器端处理上传的接口地址，你需要根据实际情况进行替换。

CSS部分（可以根据需要自定义样式）：

#multi-image-upload {
  display: none;
}
 
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
 
button:hover {
  background-color: #0056b3;
}

确保服务器能够处理多图上传请求，并且响应合适的JSON数据。以上代码只是客户端的实现，服务器端的代码需要你根据后端语言进行编写。