JS实现表单多文件上传样式美化支持选中文件后删除相关项

开发中会经常涉及到文件上传的需求，根据业务不同的需求，有不同的文件上传情况。

有简单的单文件上传，有多文件上传，因浏览器原生的文件上传样式及功能的支持度不算太高，很多时候我们会对样式进行美化，对功能进行完善。

本文根据一个例子，对多文件的上传样式做了一些简单的美化（其实也没怎么美化。。），同时支持选择文件后自定义删除相关的文件，最后再上传

文章篇幅较长，先简单看看图示：

一、文件上传基础

1. 单文件上传

最简单的文件上传，是单文件上传，form标签中加入enctype="multipart/form-data"，form表单中有一个input[type="file"]项

1

2

3

4

5

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">

<input type="text" name="user" id="user" placeholder="请输入昵称">

<input type="file" name="userImage" id="userImage">

<input type="submit" name="sub" value="提交">

</form>

2. 多文件上传

　　1）类似单文件上传，简单的多文件上传其实就是多几个input[type="file"]项

1

2

3

4

5

6

7

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">

<input type=
                        
                        提示：