本文已经过原作者TapasAdhikary授权翻译
我开源了第一个基于Vue的组织架构树组件
简介上传文件功能可以说是项目经常出现的需求。从在社交媒体上上传照片到在求职网站上发布简历，文件上传无处不在。在本文中，我们将讨论HTML文件上传支持的10种用法，希望对你有用。
1.单文件上传我们可以将input类型指定为file，以在Web应用程序中使用文件上传功能。
inputtype="file"id="file-uploader"
inputfilte提供按钮上传一个或多个文件。默认情况下，它使用操作系统的本机文件浏览器上传单个文件。成功上传后，FileAPI使得可以使用简单的JS代码读取File对象。要读取File对象，我们需要监听change事件。
首先，通过id获取文件上传的实例:
constfileUploader=document.getElementById(file-uploader);
然后添加一个change事件侦听器，以在上传完成后读取文件对象，我们从event.target.files属性获取上传的文件信息：
fileUploader.addEventListener(change,(event)={constfiles=event.target.files;console.log(files,files);});
在控制台中观察输出结果，这里