开发中会经常涉及到文件上传的需求，根据业务不同的需求，有不同的文件上传情况。
有简单的单文件上传，有多文件上传，因浏览器原生的文件上传样式及功能的支持度不算太高，很多时候我们会对样式进行美化，对功能进行完善。
本文根据一个例子，对多文件的上传样式做了一些简单的美化（其实也没怎么美化。。），同时支持选择文件后自定义删除相关的文件，最后再上传
文章篇幅较长，先简单看看图示：
一、文件上传基础
1. 单文件上传
最简单的文件上传，是单文件上传，form标签中加入enctype="multipart/form-data"，form表单中有一个input[type="file"]项
<form method="post" action="/abc.php" enctype="multipart/form-data"> <input type="text" placeholder="请输入昵称"> <input type="file"> <input type="submit" value="提交"> </form>
2. 多文件上传
1）类似单文件上传，简单的多文件上传其实就是多几个input[type="file"]项
<form method="post" action="/abc.php" enctype="multipart/form-data"> <input type="text" placeholder="请输入昵称"> <input type="file"> <input type="file"> <input type="file"> <input type="submit" value="提交"> </form>
2) HTML5为表单文件项新增了一个multiple属性，可以设置实现选择多个文件，如
<form method="post" action="/abc.php" enctype="multipart/form-data">
<input type="text" placeholder="请输入昵称">
<input type="file" multiple>
<input type="submit" value="提交">
</form>
二、表单文件上传的美化
看了上面几个图片，可以知道原生的文件选择项样式是最基本的，主要体现在三个点：
无边框，与其他有边框的元素不合拍
选择文件的按钮样式太基础
选择多个文件后只显示总数，未显示详细选择的文件名
基于几个问题，可以按需对其进行美化
第一点可以直接添加边框的样式
第二点需要增添其他元素，可以新增一个按钮（自行按需美化），将原始文件框隐藏，用JS事件绑定，点击按钮后模拟文件框的点击
<input type="file"> <input type="button" value="选择文件">
第三点与第二点类似，也得添加新的元素，选择文件后，通过JS获取选择的文件信息，并在新的元素中显示出来
想着很简单，但随之而来的问题就是，如果选中的文件数量很多，新元素占空间的多少就是个问题，可以默认显示几个文件，再通过“查看更多文件”查看到更多的信息
随之另外的想法是，一次性选中的文件很多，想取消某个文件时，又得重新选择。这未免太繁琐，所以需要提供即时删除某个选中文件的操作
三、选中文件后的删除
要提供选中文件后可删除的操作，就必然需要提供相关入口及脚本操作，下面围绕这点来做些解析
1. 界面的处理
选择文件后，我们可以通过删除按钮删除选中的文件，因为会出现多文件的情况，所以需要一个信息模版
<!-- 当前选择的文件列表 文件信息模版 --> <script type="text/template"> <span> <span>{{name}}</span> <span>×</span> </span> </script>
选中的文件一多，就得再增添一个下拉框做辅助，最多显示5个文件信息，然后通过下拉按钮展开下拉框（按钮样式自行设定）
这里5个文件间的位置计算的不是很到位，主要是这段代码，可以自行设定
// 计算每一项坐标left、占宽width left = i === 0 ? 2 : 2 + i * (100 / fileTempLen); width = 100 / fileTempLen - 2;
下拉列表里面的每一项也是一个模版
<!-- 查看更多文件 文件信息模版 --> <script type="text/template"> <li> <span>{{name}}</span> <span>×</span> </li> </script>
以下为初始的HTML结构
<form method="post" action="fileTest.php" enctype="multipart/form-data"> <!-- <input type="number" value="100"> --> <input type="file" multiple> <!-- 当前选择的文件列表（最多显示5条） --> <span> </span> <!-- 查看更多文件 --> <ul> </ul> <input type="button" value="上传"> <p>文件上传成功</p> </form>
以下为全部CSS样式