10個HTML檔案上傳技巧

前端小智發表於2021-12-15
HTML
作者： Tapas Adhikary
譯者：前端小智
來源：dev
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

簡介

上傳檔案功能可以說是專案經常出現的需求。從在社交媒體上上傳照片到在求職網站上釋出簡歷，檔案上傳無處不在。在本文中，我們將討論 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物件，該物件具有有關上傳檔案的所有後設資料資訊。

clipboard.png

如果大家看到這裡，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

2. 多檔案上傳

如果我們想上傳多個檔案，需要在標籤上新增 multiple 屬性：

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

現在，我們可以上傳多個檔案了，以前面事例為基礎，選擇多個檔案上傳後，觀察一下控制檯的變化：

clipboard.png

如果大家看到這裡，有點激動，想手賤一下，可以 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 });
  }
});

下面是單個檔案上傳的輸出結果：

clipboard.png

如果大家看到這裡，有點激動，想手賤一下，可以 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;
  }
});

clipboard.png

如果大家看到這裡，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen...

8. 怎麼上傳目錄上傳?

我們可以上傳整個目錄嗎?嗯，這是可能的，但有一些限制。有一個叫做webkitdirectory的非標準屬性(目前只有谷歌瀏覽器還有Microsoft Edge支援按照資料夾進行上傳)，它允許我們上傳整個目錄。

目前只有谷歌瀏覽器還有Microsoft Edge支援按照資料夾進行上傳，具體可以看下百度雲盤的網頁版的上傳按鈕，在火狐下就支援按照檔案進行上傳，而在谷歌和Edge下，就會給使用者提供一個下拉，讓使用者選擇是根據檔案進行上傳還是根據資料夾進行上傳。
<input type="file" id="file-uploader" webkitdirectory />

使用者必須需要確認才能上傳目錄

clipboard.png

使用者單擊“上傳”按鈕後，就會進行上傳。 這裡要注意的重要一點。 FileList陣列將以平面結構的形式包含有關上載目錄中所有檔案的資訊。 對於每個File物件，webkitRelativePath屬性表示目錄路徑。

例如，上傳一個主目錄及其下的其他資料夾和檔案：

clipboard.png

現在，File 物件將將webkitRelativePath填充為：

clipboard.png

如果大家看到這裡，有點激動，想手賤一下，可以 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';
});

clipboard.png

接下來，我們需要一個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/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章