10個有用的HTML文件上傳技巧

作者：張張 2020-11-09 08:06:37

上傳文件的能力是許多Web和移動應用的關鍵需求，從將照片上傳到社交媒體上到將簡歷發布到工作門戶網站上，文件上傳無處不在。

作為一名Web開發人員，我們一定知道HTML提供了原生文件上傳的支持，并借助于JavaScript的一點幫助。在HTML5中，File API被添加到DOM中。利用它，我們可以讀取 FileList 和其中的 File 對象，這就解決了文件的多種用例，即在本地加載文件或通過網絡發送到服務器進行處理等。

在本文中，我們將討論HTML文件上傳支持的10種用法，希望你覺得它有用。

在任何時候，如果您想使用這些文件上傳功能，都可以在這里找到：

HTML文件上傳演示：https://html-file-upload.netlify.app/

該演示的源代碼在我的Github存儲庫中，?請隨時關注我，并通過示例不斷更新代碼，如果您覺得有用，請給一個?。

源代碼倉庫：https://github.com/atapas/html-file-upload

1.單個文件上傳

我們可以將輸入類型指定為 file，以在Web應用程序中使用文件上傳器功能。

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

輸入文件類型使用戶可以通過按鈕上傳一個或多個文件，默認情況下，它允許使用操作系統的本地文件瀏覽器上傳單個文件。

上傳成功后，File API 可以使用簡單的JavaScript代碼讀取 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

<div> 
  <h1>單個文件上傳</h1> 
  <input type="file" id="file-uploader"> 
  <p>上傳文件，并在瀏覽器控制臺中查看輸出。</p> 
  <p id="feedback"></p> 
</div>

const fileUploader = document.getElementById('file-uploader'); 
 
fileUploader.addEventListener('change', (event) => { 
  const files = event.target.files; 
  console.log('files', files); 
   
  const feedback = document.getElementById('feedback'); 
  const msg = `File ${files[0].name} uploaded successfully!`; 
  feedback.innerHTML = msg; 
});

2.多文件上傳

我們可以一次上傳多個文件。為此，我們只需要在輸入文件標簽中添加一個名為 multiple 的屬性即可。

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

現在，文件瀏覽器將允許您上傳一個或多個要上傳的文件。就像前面的例子一樣，你可以添加一個 change 事件處理程序來捕獲上傳文件的信息。您是否注意到 FileList 是一個數組?對，對于多個文件上傳，數組將具有以下信息：

下面是CodePen鏈接，用于探索多個文件上傳。

CodePen：https://codepen.io/atapas/pen/MWeamYp

<div> 
  <h1>多文件上傳</h1> 
  <input type="file" id="file-uploader" multiple> 
  <p>上傳多個文件并在瀏覽器控制臺中查看輸出</p> 
  <p id="feedback"></p> 
</div>

const fileUploader = document.getElementById('file-uploader'); 
 
fileUploader.addEventListener('change', (event) => { 
  const files = event.target.files; 
  console.log('files', files); 
   
  // show the upload feedback 
  const feedback = document.getElementById('feedback'); 
  const msg = `${files.length} file(s) uploaded successfully!`; 
            feedback.innerHTML = msg; 
});

3.了解文件元數據

每當我們上傳一個文件時，File 對象都有元數據信息，如文件名、大小、最后更新時間、類型等，此信息對于進一步的驗證和決策很有用。

// 通過id獲取文件上傳者 
const fileUploader = document.getElementById('file-uploader'); 
 
// 監聽 change 事件并讀取元數據 
fileUploader.addEventListener('change', (event) => { 
  // 獲取FileList數組 
  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進行進一步探索

CodePen：https://codepen.io/atapas/pen/gOMaRJv

<div> 
  <h1>Read File Metadata</h1> 
  <input type="file" id="file-uploader"> 
  <p id="feedback"></p> 
</div>

const fileUploader = document.getElementById('file-uploader'); 
 
fileUploader.addEventListener('change', (event) => { 
  const files = event.target.files; 
  console.log('files', 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}); 
     
    const feedback = document.getElementById('feedback'); 
    const msg = ` File Name: ${name} <br/> 
              File Size: ${size} <br/> 
              File type: ${type} <br/> 
              File Last Modified: ${new Date(lastModified)}`; 
               
    feedback.innerHTML = msg; 
  } 
});

4.了解文件 accept屬性

我們可以使用 accept 屬性來限制要上傳的文件的類型，您可能希望在用戶上傳個人資料圖片時，只顯示允許瀏覽png格式圖片類型。

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

在上面的代碼中，文件瀏覽器將只允許擴展名為 jpg 和 png 的文件。

請注意，在這種情況下，文件瀏覽器會自動將文件選擇類型設置為自定義而不是全部。但是，如果需要，您始終可以將其更改回所有文件。

使用此CodePen探索 accept 屬性

CodePen：https://codepen.io/atapas/pen/OJXymRP

<div> 
  <h1>只能選擇.png和.jpg文件</h1> 
  <input type="file" id="file-uploader" accept=".jpg, .png" multiple> 
  <p>Upload files and see the output in browser console</p> 
</div>

const fileUploader = document.getElementById('file-uploader'); 
 
fileUploader.addEventListener('change', (event) => { 
  const files = event.target.files; 
  console.log('files', files); 
});

5.管理文件內容

您可以在成功上傳文件后顯示文件內容。對于個人資料圖片，如果上傳后不立即向用戶展示上傳的圖片，會造成混亂。

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

// 獲取FileReader的實例 
const reader = new FileReader(); 
 
fileUploader.addEventListener('change', (event) => { 
  const files = event.target.files; 
  const file = files[0]; 
 
  // 上傳后獲取文件對象并讀取 
  // 數據作為URL二進制字符串 
  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中選擇一個圖像文件，然后查看其渲染。

CodePen：https://codepen.io/atapas/pen/zYBvdjZ

<div> 
  <h1>顯示文件內容</h1> 
  <input type="file" id="file-uploader" accept=".jpg, .jpeg, .png" > 
  <div id="image-grid"></div> 
</div>

const fileUploader = document.getElementById('file-uploader'); 
const reader = new FileReader(); 
const imageGrid = document.getElementById('image-grid'); 
 
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; 
  }); 
});

6.驗證文件大小

如我們所見，我們可以讀取文件的大小元數據，實際上可以將其用于文件大小驗證，您可能允許用戶上傳最大1MB的圖像文件。讓我們看看如何實現這一目標。

// 文件上傳change事件的偵聽器 
fileUploader.addEventListener('change', (event) => { 
  // 讀取文件大小 
  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

<div> 
  <h1>檢查文件大小</h1> 
  <input type="file" id="file-uploader"> 
   
  <div id="feedback"></div   
</div>

const fileUploader = document.getElementById('file-uploader'); 
const feedback = document.getElementById('feedback'); 
 
fileUploader.addEventListener('change', (event) => { 
  const file = event.target.files[0]; 
  console.log('file', file); 
   
  const size = file.size; 
  console.log('size', size); 
  let msg = ''; 
   
  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; 
}); 
 
function returnFileSize(number) { 
  if(number < 1024) { 
    return number + 'bytes'; 
  } else if(number >= 1024 && number < 1048576) { 
    return (number/1024).toFixed(2) + 'KB'; 
  } else if(number >= 1048576) { 
    return (number/1048576).toFixed(2) + 'MB'; 
  } 
}

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.value = percent; 
  } 
});

不如你試著上傳一個大一點的文件，看看下面的CodePen中的進度條工作情況如何?試試吧。

CodePen：https://codepen.io/atapas/pen/eYzpwYj

<div> 
  <h1>File upload progress</h1> 
  <input type="file" id="file-uploader"> 
   
  <div id="feedback"></div> 
   
  <label id="progress-label" for="progress"></label> 
  <progress id="progress" value="0" max="100"> </progress> 
</div>

const fileUploader = document.getElementById('file-uploader'); 
const feedback = document.getElementById('feedback'); 
const progress = document.getElementById('progress'); 
 
const reader = new FileReader(); 
 
fileUploader.addEventListener('change', (event) => { 
  const files = event.target.files; 
  const file = files[0]; 
  reader.readAsDataURL(file); 
   
  reader.addEventListener('progress', (event) => { 
    if (event.loaded && event.total) { 
      const percent = (event.loaded / event.total) * 100; 
      progress.value = percent; 
      document.getElementById('progress-label').innerHTML = Math.round(percent) + '%'; 
       
      if (percent === 100) { 
        let msg = `<span style="color:green;">File <u><b>${file.name}</b></u> has been uploaded successfully.</span>`; 
        feedback.innerHTML = msg; 
      } 
    } 
  }); 
});

8.目錄上傳呢?

我們可以上傳整個目錄嗎?好吧，這是可能的，但有一些限制。有一個叫做 webkitdirectory 的非標準屬性(至少在寫這篇文章的時候是這樣)，允許我們上傳整個目錄。

雖然最初只針對基于WebKit的瀏覽器實現，但webkitdirectory也可以在Microsoft Edge以及Firefox 50和更高版本中使用。但是，即使它具有相對廣泛的支持，它仍然不是標準的，除非您別無選擇，否則不應該使用它。

您可以將此屬性指定為

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

這將允許您選擇一個文件夾(又名目錄)

用戶必須提供確認信息才能上傳目錄，

用戶單擊“Upload”按鈕后，就會進行上傳。這里要注意的重要一點：FileList 數組將以平面結構的形式包含有關上載目錄中所有文件的信息。但關鍵是，對于每個 File 對象，webkitRelativePath 屬性都會有目錄路徑。

例如，讓我們考慮一個 main 目錄及其下的其他文件夾和文件，

現在，File 對象將將 webkitRelativePath 填充為

您可以使用它在您選擇的任何UI結構中呈現文件夾和文件。使用此CodePen進行進一步探索。

CodePen：https://codepen.io/atapas/pen/dyXYRKp

<div> 
  <h1>Upload directories</h1> 
  <input type="file" id="file-uploader" webkitdirectory /> 
   
  <ul id="pathList"></ul> 
</div>

const fileUploader = document.getElementById('file-uploader'); 
const pathList = document.getElementById('pathList'); 
 
function removeAllChildNodes(parent) { 
    while (parent.firstChild) { 
        parent.removeChild(parent.firstChild); 
    } 
} 
 
fileUploader.addEventListener('change', (event) => { 
  const files = event.target.files; 
  console.log('files', files); 
   
  removeAllChildNodes(pathList); 
   
  [...files].forEach((file, index) => { 
    let path = document.createElement('li'); 
    path.innerHTML = file.webkitRelativePath; 
    pathList.appendChild(path); 
  }); 
});

9.讓我們拖放上傳

不支持拖放功能進行文件上傳是一種古老的方式，不是嗎?讓我們看看如何通過幾個簡單的步驟來實現這一目標。

首先，創建一個放置區和一個可選的區域以顯示上傳的文件內容。我們將使用圖像作為文件拖放到此處。

<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獲取拖拽和內容區域。

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 => { 
  // 獲取文件 
  const files = event.dataTransfer.files; 
 
    // 現在，我們可以盡一切可能來展示文件內容在一個HTML元素中，如，DIV。 
});

嘗試在下面的CodePen示例中拖放圖像文件，并查看其工作原理，不要忘記查看代碼以渲染拖放的圖像。

CodePen：https://codepen.io/atapas/pen/ExyVoXN

<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'); 
 
const reader = new FileReader(); 
 
if (window.FileList && window.File) { 
  dropZone.addEventListener('dragover', event => { 
    event.stopPropagation(); 
    event.preventDefault(); 
    event.dataTransfer.dropEffect = 'copy'; 
  }); 
   
  dropZone.addEventListener('drop', event => { 
    content.innerHTML = ''; 
    event.stopPropagation(); 
    event.preventDefault(); 
    const files = event.dataTransfer.files; 
    console.log(files); 
     
    reader.readAsDataURL(files[0]); 
   
    reader.addEventListener('load', (event) => { 
      content.innerHTML = ''; 
      const img = document.createElement('img'); 
      img.style.height = '400px'; 
      img.style.width = '400px'; 
      content.appendChild(img); 
      img.src = event.target.result; 
      img.alt = file.name; 
       
    }); 
  });  
}

10.使用objectURLs處理文件

有一個稱為 URL.createObjectURL() 的特殊方法，可以從文件創建唯一的URL，您也可以使用 URL.revokeObjectURL() 方法釋放它。

DOM URL.createObjectURL() 和 URL.revokeObjectURL() 方法讓你可以創建簡單的URL字符串，這些字符串可以用來引用任何可以使用DOM文件對象引用的數據，包括用戶計算機上的本地文件。

對象URL的簡單用法是：

img.src = URL.createObjectURL(file);

使用此CodePen可以進一步瀏覽對象URL。提示：將此方法與前面#5中提到的方法進行比較。

<div> 
  <h1>Use Object URL</h1> 
  <input type="file" id="file-uploader" accept=".jpg, .jpeg, .png" > 
   
  <div id="image-grid"></div> 
</div>

const fileUploader = document.getElementById('file-uploader'); 
const reader = new FileReader(); 
const imageGrid = document.getElementById('image-grid'); 
 
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; 
});

結束

很多時候，原生HTML功能足以讓我們處理手中的用例。我發現，文件上傳默認情況下提供了許多不錯的選擇。

原文：https://dev.to/atapas/10-useful-html-file-upload-tips-for-web-developers-2d1d

本文轉載自微信公眾號「前端全棧開發者」，可以通過以下二維碼關注。轉載本文請聯系前端全棧開發者公眾號。

責任編輯：武曉燕來源：前端全棧開發者

HTML 技巧上傳