PROMULGATOR

    黄大雄

    湖北省武汉市
    Html
    Css
    Js
1
2
3
4
5
6
<div class="imgFile">
    <label>
        <span></span>
        <input type="file" class="file">
    </label>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.imgFile {
    width:500px;
    border:1px solid #dbdbdb;
    display:flow-root
}
@supports (display:flow-root) {
    .imgFile {
    display:flow-root;
}
}.imgFile label input {
    display:none
}
.imgFile label span {
    width:100px;
    height:100px;
    display:inline-block;
    border:1px solid #999999;
    margin:16px;
    position:relative
}
.imgFile label span:after {
    width:60%;
    height:1px;
    background:#dbdbdb;
    content:"";
    display:inline-block;
    position:absolute;
    top:50%;
    left:calc(50% - 30%)
}
.imgFile label span:before {
    width:1px;
    height:60%;
    background:#dbdbdb;
    content:"";
    display:inline-block;
    position:absolute;
    left:50%;
    top:calc(50% - 30%)
}
.imgFile .imgDiv {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(".file").change(function() {
    //获取图片信息
    var fileLise = $(this)[0].files;
    var fileLength = fileLise.length;
    //然后循环 生成html 插入页面上 最后就赋值给img
    for (var i = 0; i < fileLength; i++) {
        var imgDiv = '<div class="imgDiv"><img id="img' + fileLise[i].name + '"><span><i class="imgRem">×</i></span></div>';
        $(".imgFile").prepend(imgDiv);
        var imgName = document.getElementById("img" + fileLise[i].name);
        if (fileLise && fileLise[i]) {
            var file = new FileReader();
            file.readAsDataURL(fileLise[i]);
            file.onload = function() {
                console.log(this);
                imgName.src = this.result
            }
        }
    }
});
$(".imgFile").on("click", ".imgRem", function() {
    $(this).parents(".imgDiv").remove();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

jQuery多图上传预览

5
      扯淡一样的丶青春0
      2018/11/13 11:22:32
      添加图片后怎样在后台获取？
      回复
      心语0
      2018/9/21 10:42:28
      蝴蝶‘恋情’0
      2018/9/13 18:00:22
      大兄弟！你这个有bug的啊！你没发现啊！图片添加后，再删除图片，被删除的图片不能再次添加的。
      回复
      黄大雄0
      2018/9/13 9:27:32
      看后台是怎么存储的
      回复
      ，，，，，0
      2018/9/12 17:07:43
      添加完文件后，怎么取到所有文件然后上传到后台？
      回复