[[351396]]

 簡介

上傳文件功能可以說是項(xiàng)目經(jīng)常出現(xiàn)的需求。從在社交媒體上上傳照片到在求職網(wǎng)站上發(fā)布簡歷，文件上傳無處不在。在本文中，我們將討論 HTML文件上傳支持的10種用法，希望對你有用。

1. 單文件上傳

我們可以將input 類型指定為file，以在Web應(yīng)用程序中使用文件上傳功能。

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

input filte 提供按鈕上傳一個(gè)或多個(gè)文件。默認(rèn)情況下，它使用操作系統(tǒng)的本機(jī)文件瀏覽器上傳單個(gè)文件。成功上傳后，F(xiàn)ile API 使得可以使用簡單的 JS 代碼讀取File對象。要讀取File對象，我們需要監(jiān)聽 change事件。

首先，通過id獲取文件上傳的實(shí)例:

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

然后添加一個(gè)change 事件偵聽器，以在上傳完成后讀取文件對象， 我們從event.target.files屬性獲取上傳的文件信息：

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

在控制臺中觀察輸出結(jié)果，這里關(guān)注一下FileList數(shù)組和File對象，該對象具有有關(guān)上傳文件的所有元數(shù)據(jù)信息。

 如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/rNLOyRm

2. 多文件上傳

如果我們想上傳多個(gè)文件，需要在標(biāo)簽上添加 multiple 屬性：

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

現(xiàn)在，我們可以上傳多個(gè)文件了，以前面事例為基礎(chǔ)，選擇多個(gè)文件上傳后，觀察一下控制臺的變化：

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

3.了解文件元數(shù)據(jù)

每當(dāng)我們上傳文件時(shí)，F(xiàn)ile對象都有元數(shù)據(jù)信息，例如file name，size，last update time，type 等等。這些信息對于進(jìn)一步的驗(yàn)證和特殊處理很有用。

const fileUploader = document.getElementById('file-uploader'); 
 
// 聽更 change 件并讀取元數(shù)據(jù) 
fileUploader.addEventListener('change', (event) => { 
  // 獲取文件列表數(shù)組 
  const files = event.target.files; 
 
  // 遍歷并獲取元數(shù)據(jù) 
  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 }); 
  } 
}); 

 下面是單個(gè)文件上傳的輸出結(jié)果：

如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/gOMaRJv

4.了解 accept 屬性

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

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

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

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

5. 管理文件內(nèi)容

成功上傳文件后顯示文件內(nèi)容，站在用戶的角度上，如果上傳之后，沒有一個(gè)預(yù)覽的，就很奇怪也不體貼。

我們可以使用FileReader對象將文件轉(zhuǎn)換為二進(jìn)制字符串。然后添加load 事件偵聽器，以在成功上傳文件時(shí)獲取二進(jìn)制字符串。

// FileReader 實(shí)例 
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; 
  }); 
}); 

 如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/zYBvdjZ

6.驗(yàn)證文件大小

如果用戶上傳圖片過大，為了不讓服務(wù)器有壓力，我們需要限制圖片的大小，下面是允許用戶上傳小于 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; 
}); 

 如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/pobjMKv

7. 顯示文件上傳進(jìn)度

更好的用戶體驗(yàn)是讓用戶知道文件上傳進(jìn)度，前面我們用過了FileReader以及讀取和加載文件的事件。 

const reader = new FileReader(); 

FileReader還有一個(gè)progress 事件，表示當(dāng)前上傳進(jìn)度，配合HTML5的progress標(biāo)簽，我們來模擬一下文件的上傳進(jìn)度。

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

 如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/eYzpwYj

8. 怎么上傳目錄上傳?

我們可以上傳整個(gè)目錄嗎?嗯，這是可能的，但有一些限制。有一個(gè)叫做webkitdirectory的非標(biāo)準(zhǔn)屬性(目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進(jìn)行上傳)，它允許我們上傳整個(gè)目錄。

• 目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進(jìn)行上傳，具體可以看下百度云盤的網(wǎng)頁版的上傳按鈕，在火狐下就支持按照文件進(jìn)行上傳，而在谷歌和Edge下，就會(huì)給用戶提供一個(gè)下拉，讓用戶選擇是根據(jù)文件進(jìn)行上傳還是根據(jù)文件夾進(jìn)行上傳。

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

用戶必須需要確認(rèn)才能上傳目錄

用戶單擊“上傳”按鈕后，就會(huì)進(jìn)行上傳。這里要注意的重要一點(diǎn)。FileList數(shù)組將以平面結(jié)構(gòu)的形式包含有關(guān)上載目錄中所有文件的信息。對于每個(gè)File對象，webkitRelativePath屬性表示目錄路徑。

例如，上傳一個(gè)主目錄及其下的其他文件夾和文件：

 現(xiàn)在，F(xiàn)ile 對象將將webkitRelativePath填充為：

 如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/dyXYRKp

9. 拖拽上傳

不支持文件上傳的拖拽就有點(diǎn) low 了，不是嗎?我們來看看如何通過幾個(gè)簡單的步驟實(shí)現(xiàn)這一點(diǎn)。

首先，創(chuàng)建一個(gè)拖放區(qū)域和一個(gè)可選的區(qū)域來顯示上傳的文件內(nèi)容。

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

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

 添加一個(gè)dragover 事件處理程序，以顯示將要復(fù)制的內(nèi)容的效果: 

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

接下來，我們需要一個(gè)drop事件監(jiān)聽器來處理。

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

如果大家看到這里，有點(diǎn)激動(dòng)，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/ExyVoXN

10. 使用objectURL處理文件

有一個(gè)特殊的方法叫做URL.createobjecturl()，用于從文件中創(chuàng)建唯一的URL。還可以使用URL.revokeObjectURL()方法來釋放它。

URL.revokeObjectURL() 靜態(tài)方法用來釋放一個(gè)之前已經(jīng)存在的、通過調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對象。當(dāng)你結(jié)束使用某個(gè) URL 對象之后，應(yīng)該通過調(diào)用這個(gè)方法來讓瀏覽器知道不用在內(nèi)存中繼續(xù)保留對這個(gè)文件的引用了。

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; 
}); 

 如果大家看到這里，有點(diǎn)激動(dòng)，點(diǎn)這里，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/BazzaoN

總結(jié)

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

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