图片上传，多张图片上传

css代码：

body {

            background: #000;

        }

        .group-coms-pic {

            width: 100%;

            display: flex;

            flex-wrap: wrap;

            align-items: center;

            /* margin-left: 70px; */

        }

        .item {

            position: relative;

            height: 270px;

            width: 30%;

            margin-left: 25px;

        }

        .pic-box {

            height: 90%;

            width: 100%;

        }

        .img {

            height: 100%;

        }

        .tk {

            color: #fff;

        }

        .del {

            color: red;

            position: absolute;

            top: 1%;

            left: 86%;

            font-size: 18px;

            cursor: pointer;

        }

        .upload-pic {

            margin-bottom: 10px;

            height: 45px !important;

            display: flex;

            align-items: center;

        }

        .up-Lab {

            color: #fff;

            margin: 20px;

            padding: 5px;

            font-size: 14px;

            background: blueviolet;

            border-radius: 5px;

        }

        ::-webkit-scrollbar {

            width: 10px !important;

            height: 300px !important;

        }

        ::-webkit-scrollbar-track-piece {

            background-color: #0d3662;

        }

        ::-webkit-scrollbar-thumb {

            cursor: pointer;

            background-color: #1a76da;

            border-radius: 5px;

        }

HTML代码：

 <div class="upload-pic">

        <label class="up-Lab" for="add-pic-btn">上传图片</label>

        <input type="file" accept="image/*" style="display: none;" multiple class="up-file" id="add-pic-btn">

    </div>   

<div class="group-coms-pic" id="groupTu"> </div>

js代码：

 <script type="text/javascript" src="../../js/plugins/My97DatePicker/WdatePicker.js"></script>

    <script type="text/javascript" src="../../js/plugins/jquery-1.11.3.min.js"></script>

    <script type="text/javascript">

        //上传多个文件方法

        //input file已增加multiple属性，按住ctrl可选择多图

        var arrTitle = []; //存标题名

        document.getElementById("add-pic-btn").addEventListener("change", function () {

            // undefined

            var obj = this;

            var length = obj.files.length;

            // _html = '';

            for (var i = 0; i < length; i++) {

                // undefined

                var reader = new FileReader();

                if (!reader) {

                    parent.layer.msg("对不起，您的浏览器不支持！请更换浏览器试一下");

                    // console.log('对不起，您的浏览器不支持！请更换浏览器试一下');

                    return

                }

                //存储上传的多张图片名字

                arrTitle.push(obj.files[i].name);

                console.log(arrTitle);

                reader.error = function (e) {

                    parent.layer.msg("读取异常");

                    // console.log("读取异常")

                };

                //iffi语法

                (function (i) {

                    //读取成功

                    reader.onload = function (e) {

                        var _src = e.target.result;

                        //节点

                        var divItem = document.createElement('div');

                        divItem.setAttribute('class', 'item');

                        var divPic = document.createElement('div');

                        divPic.setAttribute('class', 'pic-box');

                        var img = document.createElement('img');

                        img.setAttribute('class', 'img');

                        img.setAttribute('src', _src);

                        var divTk = document.createElement('div');

                        divTk.setAttribute('class', 'tk')

                        var spanDel = document.createElement('span');

                        spanDel.setAttribute('class', 'del');

                        spanDel.setAttribute('title', arrTitle[i]);

                        spanDel.innerText = 'x';

                        divTk.innerHTML = arrTitle[i];

                        divItem.appendChild(divPic);

                        divPic.appendChild(img);

                        divItem.appendChild(divTk);

                        divItem.appendChild(spanDel);

                        //增加节点结构

                        var groupTu = document.getElementById('groupTu');

                        groupTu.insertBefore(divItem, groupTu.firstChild);

                        //删除节点方法

                        spanDel.onclick = function () {

                            removeItem(this);

                            return false;

                        };

                    };

                })(i)

                reader.onloadstart = function () {

                }

                reader.onprogress = function (e) {

                    if (e.lengthComputable) {

                        parent.layer.msg("正在读取文件");

                        // console.log("正在读取文件")

                    }

                };

                reader.readAsDataURL(obj.files[i]);

            }

        })

        //删除图片

        function removeItem(delNode) {

            var itemNode = delNode.parentNode,

                title = delNode.getAttribute('title');

            // var flag = confirm("确认要删除名为：" + title + "的图片？");

            if (true) {

                itemNode.parentNode.removeChild(itemNode);

                parent.layer.msg("删除成功");

                // console.log('删除成功~')

            }

            return false;

        }

    </script>