input上傳檔案可以同時選擇多張嗎？怎麼設定？

王铁柱6發表於2024-12-04

是的，前端開發中，<input type="file"> 可以透過設定 multiple 屬性來支援多檔案上傳。 不需要額外的設定，只需要新增這個屬性即可。

以下是幾種常見的實現方式以及一些補充說明：

1. HTML:

<input type="file" id="myFiles" name="myFiles[]" multiple>
  • multiple 屬性的存在使得使用者可以選擇多個檔案。
  • name="myFiles[]" 非常重要。方括號 [] 告訴後端這是一個檔案陣列，方便後端處理。 如果不加方括號，後端可能只能接收到最後一個選擇的檔案。

2. JavaScript (處理選中的檔案):

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

fileInput.addEventListener('change', function() {
  const files = fileInput.files;

  if (files.length > 0) {
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      console.log(`File name: ${file.name}`);
      console.log(`File size: ${file.size}`);
      console.log(`File type: ${file.type}`);
      //  在這裡可以進行檔案上傳操作，例如使用 FormData 和 fetch 或 XMLHttpRequest
    }
  } else {
    console.log('No files selected.');
  }
});

3. 使用 FormData 上傳檔案 (示例):

fileInput.addEventListener('change', function() {
  const files = fileInput.files;
  const formData = new FormData();

  for (let i = 0; i < files.length; i++) {
    formData.append('myFiles[]', files[i]); // 注意這裡的 'myFiles[]' 要和後端約定好
  }

  fetch('/upload', { // 將 '/upload' 替換為你的後端上傳介面
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Upload successful:', data);
  })
  .catch(error => {
    console.error('Error uploading files:', error);
  });
});

一些額外的考慮:

  • 檔案大小限制: 你可能需要在前端或後端限制上傳檔案的大小，以防止使用者上傳過大的檔案。
  • 檔案型別限制: 可以使用 accept 屬性來限制使用者可以選擇的檔案型別。 例如：<input type="file" accept="image/*"> 只允許選擇圖片檔案。
  • 上傳進度顯示: 對於大檔案上傳，顯示上傳進度可以提升使用者體驗。
  • 拖放上傳: 可以結合 Drag and Drop API 實現拖放上傳功能，更加方便使用者操作。
  • 後端處理: 確保你的後端程式碼能夠正確處理多檔案上傳。

透過以上方法，你可以輕鬆地在前端實現多檔案上傳功能。 記住根據你的具體需求調整程式碼，並與後端做好溝通，確保前後端資料傳輸一致。

相關文章