原生js jquery实现多张图片上传 预览 删除

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

1、Duang!Duang!Duang!上图、看最终效果(注:鼠标移上图片显示“删除”按钮)

2、贴上我的css代码,方便小伙伴们看到效果!

.img-cont{        width:1000px;        height:570px;        border:2px solid #317ef3;        margin:50px auto;      }        .img-cont>div{        width:300px;        height:260px;        border:1px solid #777;        float:left;        margin:20px 0 0 20px;      }        .img-cont>div>div{        width:300px;        height:220px;        border:1px solid red;      }        .img-cont>div>a{        width:60px;        height:30px;        border-radius:4px;        line-height: 30px;        text-align: center;        color:#fff;        display: block;        background: #317ef3;        margin:5px 0 0 0px;        cursor: pointer;      }        .hide{        display: none !important;      }

3、html元素就是一个file按钮(同时给file绑定change方法)、一个img容器,直接贴代码

<input type="file" οnchange='PreviewImage(this)' />     <div class="img-cont">        </div> 

4、重头戏来了,定义PreviewImage()方法

注:(1)此方法主要实现动态添加DOM元素、展示图片的功能、同时兼容不同浏览器

(2)小伙伴们注意了,我生成的div的id是动态的,number变量+string变量js会自动转化为string类型哦

贴代码:

5、最后一步:绑定一些mouseenter、mouseleave时间,有一点要注意:

注:用jq的on()为按钮绑定事件前、一定要用off()解绑哦,不然就是多次执行、内存泄漏了

demo地址: https://github.com/chuanzaizai/img-upload-delete

点这里可以跳转到人工智能网站