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

本文已經過原作者 Tapas Adhikary 授權翻譯

簡介

上傳文件功能可以說是項目經常出現的需求。從在社交媒體上上傳照片到在求職網站上發布簡歷，文件上傳無處不在。在本文中，我們將討論 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/rNLOyRm

2. 多文件上傳

如果我們想上傳多個文件，需要在標簽上添加 multiple 屬性：

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

現在，我們可以上傳多個文件了，以前面事例為基礎，選擇多個文件上傳后，觀察一下控制臺的變化：

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

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/gOMaRJv

4.了解 accept 屬性

我們可以使用accept屬性來限制要上載的文件的類型，如果只想上傳的文件格式是 .jpg，.png 時，可以這么做：

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

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

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

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/zYBvdjZ

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/pobjMKv

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/eYzpwYj

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/dyXYRKp

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/ExyVoXN

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/BazzaoN

總結

無論何時，如果你還想學習本文涉及的一些知識，你可以在這里嘗試。

https://html-file-upload.netlify.app/

天我們要來談談一個前端面試中經常出現的問題：如何實現上傳圖片并存儲到服務器？這個問題聽起來好像很復雜，但其實只要掌握了基本的HTML、JavaScript和一點后端知識，就能輕松搞定！

首先，我們需要一個HTML表單來讓用戶選擇并上傳圖片。這個表單需要包含一個<input type="file">元素，讓用戶可以選擇文件。然后，我們還需要一個提交按鈕，讓用戶可以提交表單。

<form id="uploadForm" enctype="multipart/form-data">  
  <input type="file" id="imageUpload" name="image">  
  <button type="submit">上傳圖片</button>  
</form>

接下來，我們需要用JavaScript來監聽表單的提交事件，并阻止表單的默認提交行為。然后，我們可以獲取用戶選擇的文件，并創建一個FormData對象來存儲這個文件。最后，我們用fetch API或者axios等庫來發送一個POST請求到服務器，把文件傳給服務器。

document.getElementById('uploadForm').addEventListener('submit', function(event) {  
  event.preventDefault();  
  
  const formData = new FormData();  
  const imageFile = document.getElementById('imageUpload').files[0];  
  formData.append('image', imageFile);  
  
  fetch('/api/upload', {  
    method: 'POST',  
    body: formData  
  })  
  .then(response => response.json())  
  .then(data => console.log(data))  
  .catch(error => console.error(error));  
});

在上面的代碼中，我們假設服務器的API路徑是/api/upload，你需要根據實際情況來修改這個路徑。另外，我們還假設服務器會返回一個JSON響應，包含了上傳結果的信息。當然，這也取決于你的后端實現。

好了，前端的工作我們就完成了。接下來，我們來看看服務器是怎么處理這個上傳的圖片的。

一般來說，服務器會接收到一個包含文件的POST請求，然后把這個文件保存到服務器的某個地方，比如一個文件系統或者一個云存儲服務。這個過程的具體實現會依賴于你使用的后端框架和存儲服務。

不過，有一點需要注意的是，為了安全起見，你應該在服務器端對上傳的文件進行一些驗證和過濾，比如檢查文件的類型、大小等，防止惡意文件或者過大的文件上傳到服務器。

總的來說，上傳圖片并存儲到服務器這個功能雖然聽起來很復雜，但其實只要掌握了基本的HTML、JavaScript和一點后端知識，就能輕松搞定。當然，這個過程還有很多細節和優化點可以探討，比如如何顯示上傳進度、如何處理上傳失敗等等。但無論如何，只要你敢于嘗試和挑戰，就一定能成為一名優秀的前端工程師！

如何使用Typora撰寫導出HTML的文檔？Typora是一個所見即所得的Markdown格式文本編輯器，支持Windows、macOS和GNU/Linux操作系統，包括對GitHub Flavored Markdown擴展格式的支持、拼寫檢查、自定義CSS樣式、數學公式渲染（通過MathJax）等特性。使用Typora撰寫文檔能達到如下效果：

某某產品操作手冊HTML示例

當然，使用Typora配置圖片時，需將圖片上傳到圖床并存儲到碼云，這樣其他人才能看到的哦~~

下面即Typora配置圖片自動上傳到圖床的步驟方法——————

詳細步驟及坑點防御如下：

1.下載PicGo

1)PicGo: 一個用于快速上傳圖片并獲取圖片 URL 鏈接的工具

2)安裝picgo時，建議直接安裝在C盤；

3）安裝成功后，上傳圖片到SM.MS圖床試一下，如果在相冊中可以看到所上傳的圖片，證明安裝picgo成功；

2.下載插件gitee

注意：安裝gitee插件，必須要先安裝node.js才能安裝插件

這2個都可以.

3.在碼云創建倉庫,及token

token獲取：進入碼云，點擊進入設置頁,找到左側私人令牌，點擊生成新令牌，描述隨便填寫，就勾選projects，提交，復制獲取到的token

4.在picgo填寫倉庫信息

【能手動填寫的最好手動填寫】最后如上圖填寫的資料一樣,owner是你的gitee用戶名,repo是倉庫名,注意message不寫會無法保存.

5.在Typora中配置

在線咨詢

上一篇：純CSS實現輪播圖效果，你不知道的CSS3黑科技
下一篇：HTML5大數據可視化效果（一）彩虹爆炸圖

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商