文件上传是 Web 开发常见需求，上传文件需要用到文件输入框，如果给文件输入框添加一个 multiple 属性则可以一次选择多个文件（不支持的浏览器会自动忽略这个属性）

<input multiple type="file">

点击这个输入框就可以打开浏览文件对话框选择文件了，一般一个输入框上传一个文件就行，要上传多个文件也可以用多个输入框来处理，这样做是为了兼容那些不支持 multiple 属性的浏览器，同时用户一般也不会选择多个文件

基本上传方式

当把文件输入框放入表单中，提交表单的时候即可将选中的文件一起提交上传到服务器，需要注意的是由于提交的表单中包含文件，因此要修改一下表单元素的 enctype 属性为 multipart/form-data

<form action="#" enctype="multipart/form-data" method="post">   <input name="file" type="file">   <button type="submit">Upload</button> </form>

这样上传方式是传统的同步上传，上传的文件如果很大，往往需要等待很久，上传完成后页面还会重新加载，并且必须等待上传完成后才能继续操作

早期的浏览器并不支持异步上传，不过可以使用 iframe 来模拟，在页面中隐藏一个 <iframe> 元素，指定一个 name 值，同时将 <form> 元素的 target 属性值指定为 <iframe> 元素的 name 属性的值，将两者关联起来

<form action="#" enctype="multipart/form-data" method="post" target="upload-frame">   <input name="file" type="file">   <button type="submit">Upload</button> </form> <iframe id="upload-frame" name="upload-frame" src="about:blank" style="display: none;"></iframe>

这样在提交表单上传的时候，页面就不会重新加载了，取而代之的是 iframe 重新加载了，不过 iframe 原本就是隐藏的，即使重新加载也不会感知到

访问文件

File API 提供了访问文件的能力，通过输入框的 files 属性访问，这会得到一个 FileList，这是一个集合，如果只选择了一个文件，那么集合中的第一个元素就是这个文件