<div> 
  <h1>顯示文件內(nèi)容</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; 
  }); 
}); 

<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.顯示文件上傳進(jìn)度

更好的可用性是讓你的用戶(hù)知道文件上傳的進(jìn)程?，F(xiàn)在，我們知道了 FileReader 和讀取和加載文件的事件。

const reader = new FileReader(); 

FileReader 有另一個(gè)事件，稱(chēng)為進(jìn)度(progress)，知道已加載了多少。我們可以使用HTML5的 progress 標(biāo)簽來(lái)創(chuàng)建帶有此信息的進(jìn)度欄。

reader.addEventListener('progress', (event) => { 
  if (event.loaded && event.total) { 
    // 計(jì)算完成百分比 
    const percent = (event.loaded / event.total) * 100; 
    // 將值設(shè)置為進(jìn)度組件 
    progress.value = percent; 
  } 
}); 

不如你試著上傳一個(gè)大一點(diǎn)的文件，看看下面的CodePen中的進(jìn)度條工作情況如何?試試吧。

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.目錄上傳呢?

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

雖然最初只針對(duì)基于WebKit的瀏覽器實(shí)現(xiàn)，但webkitdirectory也可以在Microsoft Edge以及Firefox 50和更高版本中使用。但是，即使它具有相對(duì)廣泛的支持，它仍然不是標(biāo)準(zhǔn)的，除非您別無(wú)選擇，否則不應(yīng)該使用它。

您可以將此屬性指定為

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

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

用戶(hù)必須提供確認(rèn)信息才能上傳目錄，

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

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

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

您可以使用它在您選擇的任何UI結(jié)構(gòu)中呈現(xiàn)文件夾和文件。使用此CodePen進(jìn)行進(jìn)一步探索。

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.讓我們拖放上傳

不支持拖放功能進(jìn)行文件上傳是一種古老的方式，不是嗎?讓我們看看如何通過(guò)幾個(gè)簡(jiǎn)單的步驟來(lái)實(shí)現(xiàn)這一目標(biāo)。

首先，創(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> 

通過(guò)它們各自的ID獲取拖拽和內(nèi)容區(qū)域。

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

接下來(lái)，定義放置圖像時(shí)我們要做什么，我們將需要一個(gè) drop 事件監(jiān)聽(tīng)器來(lái)處理。

dropZone.addEventListener('drop', event => { 
  // 獲取文件 
  const files = event.dataTransfer.files; 
 
    // 現(xiàn)在，我們可以盡一切可能來(lái)展示文件內(nèi)容在一個(gè)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處理文件

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

DOM URL.createObjectURL() 和 URL.revokeObjectURL() 方法讓你可以創(chuàng)建簡(jiǎn)單的URL字符串，這些字符串可以用來(lái)引用任何可以使用DOM文件對(duì)象引用的數(shù)據(jù)，包括用戶(hù)計(jì)算機(jī)上的本地文件。

對(duì)象URL的簡(jiǎn)單用法是：

img.src = URL.createObjectURL(file);

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

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

結(jié)束

很多時(shí)候，原生HTML功能足以讓我們處理手中的用例。我發(fā)現(xiàn)，文件上傳默認(rèn)情況下提供了許多不錯(cuò)的選擇。

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