web開發之文件上傳的多種實作方式（附程式碼）

檔案上傳是Web 開發常見需求，上傳檔案需要用到檔案輸入框，如果在檔案輸入框中新增一個multiple 屬性則可以一次選擇多個文件（不支援的瀏覽器會自動忽略這個屬性）

<input multiple type="file">

點擊這個輸入框就可以打開瀏覽文件對話框選擇文件了，一般一個輸入框上傳一個文件就行，要上傳多個文件也可以用多個輸入框來處理，這樣做是為了相容於那些不支援multiple 屬性的瀏覽器，同時使用者一般也不會選擇多個檔案

（推薦學習：HTML影片教學教學） 

基本上傳方式

當把文件輸入框放入表單中，提交表單的時候即可將選中的文件一起提交上傳到伺服器，需要注意的是由於提交的表單中包含文件，因此要修改一下表單元素的enctype屬性為multipart/form-data

<form action="#" enctype="multipart/form-data" method="post">
  <input name="file" type="file">
  <button type="submit">Upload</button>
</form>

這樣上傳方式是傳統的同步上傳，上傳的檔案如果很大，往往需要等待很久，上傳完成後頁面還會重新加載，且必須等待上傳完成後才能繼續操作

早期的瀏覽器並不支援非同步上傳，不過可以使用iframe 來模擬，在頁面中隱藏一個