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

angryTom
發布: 2019-11-28 14:00:17
轉載
6869 人瀏覽過

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 來模擬,在頁面中隱藏一個