表单中的multiple属性有什么用？如何允许选择多个文件？

multiple

<input type="file" multiple>

multiple

<input type="file">

FileList

<input type="file" id="fileInput" multiple>
<button onclick="processFiles()">上传</button>

<script>
function processFiles() {
  const fileInput = document.getElementById('fileInput');
  const files = fileInput.files; // FileList 对象

  if (files.length > 0) {
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      console.log("文件名: " + file.name);
      console.log("文件大小: " + file.size);
      // 在这里可以进行文件上传操作，例如使用 FormData 对象
      uploadFile(file);
    }
  } else {
    console.log("没有选择任何文件。");
  }
}

function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

  // 假设你的服务器端点是 /upload
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('上传成功:', data);
  })
  .catch(error => {
    console.error('上传失败:', error);
  });
}
</script>

FileList

name

size

FormData

multiple

const fileInput = document.getElementById('fileInput');

if ('multiple' in fileInput) {
  // 支持 multiple 属性
  console.log("支持 multiple 属性");
} else {
  // 不支持 multiple 属性，可能需要显示警告信息或者提供替代方案
  console.log("不支持 multiple 属性");
}

multiple

accept

<input type="file" id="imageInput" multiple accept="image/*">

accept

<input type="file" id="fileInput" multiple accept="image/jpeg, image/png, application/pdf">

accept