10個對web開發人員有用的HTML文件上傳技巧

做者： Tapas Adhikary
譯者：前端小智
來源：dev

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：https://github.com/qq44924588...

簡介

上傳文件功能能夠說是項目常常出現的需求。從在社交媒體上上傳照片到在求職網站上發佈簡歷，文件上傳無處不在。在本文中，咱們將討論 HTML文件上傳支持的10種用法，但願對你有用。

1. 單文件上傳

咱們能夠將input 類型指定爲file，以在Web應用程序中使用文件上傳功能。

<input type="file" id="file-uploader">

input filte 提供按鈕上傳一個或多個文件。 默認狀況下，它使用操做系統的本機文件瀏覽器上傳單個文件。成功上傳後，File API 使得可使用簡單的 JS 代碼讀取File對象。 要讀取File對象，咱們須要監聽 change事件。

首先，經過id獲取文件上傳的實例:

const fileUploader = document.getElementById('file-uploader');

而後添加一個change 事件偵聽器，以在上傳完成後讀取文件對象， 咱們從event.target.files屬性獲取上傳的文件信息：

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  console.log('files', files);
});

在控制檯中觀察輸出結果，這裏關注一下FileList數組和File對象，該對象具備有關上傳文件的全部元數據信息。

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

2. 多文件上傳

若是咱們想上傳多個文件，須要在標籤上添加 multiple 屬性：

<input type="file" id="file-uploader" multiple />

如今，咱們能夠上傳多個文件了，之前面事例爲基礎，選擇多個文件上傳後，觀察一下控制檯的變化：

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

3.瞭解文件元數據

每當咱們上傳文件時，File對象都有元數據信息，例如file name，size，last update time，type 等等。這些信息對於進一步的驗證和特殊處理頗有用。

const fileUploader = document.getElementById('file-uploader');

// 聽更 change 件並讀取元數據
fileUploader.addEventListener('change', (event) => {
  // 獲取文件列表數組
  const files = event.target.files;

  // 遍歷並獲取元數據
  for (const file of files) {
    const name = file.name;
    const type = file.type ? file.type: 'NA';
    const size = file.size;
    const lastModified = file.lastModified;
    console.log({ file, name, type, size, lastModified });
  }
});

下面是單個文件上傳的輸出結果：

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

4.瞭解 accept 屬性

咱們可使用accept屬性來限制要上載的文件的類型，若是隻想上傳的文件格式是 .jpg，.png 時，能夠這麼作：

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

在上面的代碼中，只能選擇後綴是.jpg和.png的文件。

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

5. 管理文件內容

成功上傳文件後顯示文件內容，站在用戶的角度上，若是上傳以後，沒有一個預覽的，就很奇怪也不體貼。

咱們可使用FileReader對象將文件轉換爲二進制字符串。 而後添加load 事件偵聽器，以在成功上傳文件時獲取二進制字符串。

// FileReader 實例
const reader = new FileReader();

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];

  reader.readAsDataURL(file);

  reader.addEventListener('load', (event) => {
    const img = document.createElement('img');
    imageGrid.appendChild(img);
    img.src = event.target.result;
    img.alt = file.name;
  });
});

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

6.驗證文件大小

若是用戶上傳圖片過大，爲了避免讓服務器有壓力，咱們須要限制圖片的大小，下面是容許用戶上傳小於 1M 的圖片，若是大於 1M 將上傳失敗。

fileUploader.addEventListener('change', (event) => {
  // Read the file size
  const file = event.target.files[0];
  const size = file.size;

  let msg = '';

 // 檢查文件大小是否大於1MB
  if (size > 1024 * 1024) {
      msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;
  } else {
      msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;
  }
  feedback.innerHTML = msg;
});

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

7. 顯示文件上傳進度

更好的用戶體驗是讓用戶知道文件上傳進度，前面咱們用過了FileReader以及讀取和加載文件的事件。

const reader = new FileReader();

FileReader還有一個progress 事件，表示當前上傳進度，配合HTML5的progress標籤，咱們來模擬一下文件的上傳進度。

reader.addEventListener('progress', (event) => {
  if (event.loaded && event.total) {
    // 計算完成百分比
    const percent = (event.loaded / event.total) * 100;
    // 將值綁定到 `progress`標籤
    progress.value = percent;
  }
});

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

8. 怎麼上傳目錄上傳?

咱們能夠上傳整個目錄嗎?嗯，這是可能的，但有一些限制。有一個叫作webkitdirectory的非標準屬性(目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進行上傳)，它容許咱們上傳整個目錄。

目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進行上傳，具體能夠看下百度雲盤的網頁版的上傳按鈕，在火狐下就支持按照文件進行上傳，而在谷歌和Edge下，就會給用戶提供一個下拉，讓用戶選擇是根據文件進行上傳仍是根據文件夾進行上傳。

<input type="file" id="file-uploader" webkitdirectory />

用戶必須須要確認才能上傳目錄

用戶單擊「上傳」按鈕後，就會進行上傳。 這裏要注意的重要一點。 FileList數組將以平面結構的形式包含有關上載目錄中全部文件的信息。 對於每一個File對象，webkitRelativePath屬性表示目錄路徑。

例如，上傳一個主目錄及其下的其餘文件夾和文件：

如今，File 對象將將webkitRelativePath填充爲：

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

9. 拖拽上傳

不支持文件上傳的拖拽就有點 low 了，不是嗎?咱們來看看如何經過幾個簡單的步驟實現這一點。

首先，建立一個拖放區域和一個可選的區域來顯示上傳的文件內容。

<div id="container">
  <h1>Drag & Drop an Image</h1>
  <div id="drop-zone">
    DROP HERE
  </div>

  <div id="content">
    Your image to appear here..
  </div>

</div>

經過它們各自的ID獲取dropzone和content 區域。

const dropZone = document.getElementById('drop-zone');
 const content = document.getElementById('content');

添加一個dragover 事件處理程序，以顯示將要複製的內容的效果:

dropZone.addEventListener('dragover', event => {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
});

接下來，咱們須要一個drop事件監聽器來處理。

dropZone.addEventListener('drop', event => {
  // Get the files
  const files = event.dataTransfer.files;


});

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

10. 使用objectURL處理文件

有一個特殊的方法叫作URL.createobjecturl()，用於從文件中建立惟一的URL。還可使用URL.revokeObjectURL()方法來釋放它。

URL.revokeObjectURL() 靜態方法用來釋放一個以前已經存在的、經過調用 URL.createObjectURL() 建立的 URL 對象。當你結束使用某個 URL 對象以後，應該經過調用這個方法來讓瀏覽器知道不用在內存中繼續保留對這個文件的引用了。

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];
  
  const img = document.createElement('img');
  imageGrid.appendChild(img);
  img.src = URL.createObjectURL(file);
  img.alt = file.name;
});

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

總結

不管什麼時候，若是你還想學習本文涉及的一些知識，你能夠在這裏嘗試。

https://html-file-upload.netl...

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://dev.to/atapas/10-usef...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。