如何用如何用input标签和标签和jquery实现多图片的上传和回显功能实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图
效果图
我们从零来做一个这样的demo
第一步:
我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置
input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下。
大概的样式
还是放一下源码,只谈效果,不放源码的都是耍流氓
这是body
<body>
<div class="uploadImgBtn" id="uploadImgBtn">
<input class="uploadImg" type="file" name="file" multiple id="file">
</div>
</body>
这是css的样式