原生上传文件 input上传文件及回显文件名

html

<div style='display:flex;'>
<div class='uploadIcon'>
	<input class="uploadImg" type="file" id="file" multiple="multiple" onchange="handleFile('file','fileSub')"/>
</div>
<ul class='fileSub'>
    <li>暂无上传文件</li>
</ul>
</div>

1. 只需要是标签为input type为file multiple是代表一次可上传多个文件
2. onchange里到函数 我是用出来处理上传到服务器 和进行上传之后回显数据名处理的，这里大家可以根据需求自行修改的

css

.uploadIcon{
    width: 58px;
    height: 50px;
    cursor: pointer;
    position: relative;
    background: url("../module/fileupload/uploadIcon.png") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}
.uploadImg{
    position: absolute;
    right: 0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;