10个对web开发人员有用的HTML文件上传技巧( 三 ) _HTML

文章插图

如果大家看到这里，有点激动，想手贱一下，可以 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/

【10个对web开发人员有用的HTML文件上传技巧】