10个有用的HTML文件上传技巧-低调大师

10个有用的HTML文件上传技巧

2020-11-09 596

上传文件的能力是许多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

本文转载自微信公众号「前端全栈开发者」，可以通过以下二维码关注。转载本文请联系前端全栈开发者公众号。

微信关注我们

原文链接：http://network.51cto.com/art/202011/631206.htm

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

以OpenShift 为“底座”，IBM混合云平台生态系统日臻强大

阿里云加入 IBM Cloud Paks 第三方生态系统作者：潘雪梅 IBM 大中华区云计算与认知软件事业部混合云技术总监 “IBM 的混合云平台和我们开放的第三方生态系统，具有无限的扩展和定制能力，可以帮助每一个企业整合和简化所需要的一切，实现智能、弹性和灵活性，在复杂多变的数字商业环境中蓬勃发展。” 新冠肺炎疫情带来的诸多不确定性，使更多企业开始意识到敏捷、高效、开放、安全的 IT 架构对于快速响应市场变化，以及加速数字化转型的重要性。IBM 大中华区 CEO 包卓蓝提出，现在就是一个新的“达尔文时刻”，在寻求生存和发展、成本效益和规模创新的价值平衡中，企业正在逐渐加速业务云化部署。很多企业已经处于云计算环境中，或是正在规划采用云计算模式以实现敏捷的业务流程。在这一过程中，企业并不希望被任何一家云服务商锁定，而是希望拥有选择权和灵活的空间，可以自由地采用能够为其提供创新产品的特定云服务商。因此，我认为，IBM 和红帽打造的开放安全的混合云平台，正是此时此刻能够帮助企业获得速度、安全、灵活与经济效益，实现持续创新的最佳平台。继主机、服务以及中间件之后，作为 IBM 所打造的第四...

2020-11-09

673

11月6日，一颗名为“电子科技大学号”的卫星在山西太原发射成功，引起了社会各界的广泛关注。之所以关注，是因为这颗卫星号称是全球首颗“6G试验卫星”，搭载了被视为6G潜在关键技术的太赫兹通信载荷，将进行空间应用场景下的太赫兹技术验证(全球首次)。卫星星体的一部分说实话，第一眼看到这个新闻，我的表情是这样的：最近这段时间，关于6G的新闻很多，其实也见怪不怪了。但是，把太赫兹搬到太空，美其名曰6G实验，实在是有点“过界”了，完全看不下去。什么是太赫兹? 很简单，频率在THz(Tera Hertz，太拉赫兹，1THz=1000Ghz)级别的电磁波，就是太赫兹电磁波。使用太赫兹电磁波进行通信的技术，就是太赫兹通信。一直以来，太赫兹和空天一体化，被认为是6G的两大关键技术，也是重点研究方向。人们普遍认为，未来6G将使用太赫兹频段电磁波进行通信。(需要说明的是，目前ITU国际电联并没有开会讨论6G频段到底是哪些，更没有正式发布过6G频段的定义，所以太赫兹到底是不是6G频段，现在也没有明确。) 乍一看，这个6G试验卫星好像没有什么毛病，实验嘛，怎么不行? 但大家稍微懂点通信技术的话，就会发...

2020-11-09

537

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。