下面我们了解一下,多图上传时,怎么实现预览、上传、删除等功能。下图是功能实现的预览效果,虽然样式有点丑,不过功能还是实现了。话不多说,直接看代码会更直观一些。
首先定义一下基本格式,样式代码自行脑补:
<body>
<div class=upload-header>
<input id=upload type=file accept=image/* multiple=multiple>
<button class=btn>点击上传</button>
</div>
<div class=img-box>
<!-- 存放预览图片 -->
</div>