input同时选中多个图片或视频的读取，展示和删除

demo效果图如图所示

html:

<!-- 图片上传 -->
<div class="from-text">
    <a href="javascript:;" class="file">选择图片/视频
        <input type="file" name="" value="选择文件" id="uploadfile" accept=".mp4,.jpg" multiple>
    </a>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
        <ul class="layui-upload-list" id="img-box"></ul>
    </blockquote>
</div>
<!--end-->
<button type="button" id="response-submit" class="submit layui-btn">上传</button>

css:

/*选中的li悬浮变色*/
        .boxdel:after {
            content: "";
            background:rgba(0,0,0,0.4);
            z-index:1;
            -webkit-transition: 0.2s;
            -moz-transition: 0.2s;
            -ms-transition: 0.2s;
            -o-transition: 0.2s;
            transition: 0.2s;
            position: absolute;
            top:1px;
            right:9.2px;
            width: 92px;
            height: 92px;
            opacity: 0;
            filter: alpha(opacity=0);
        }
        .boxdel:hover:after {
            opacity: 100;
            filter: alpha(opacity=0);
            cursor: pointer;
        }
        .boxdel:before {
            content: "";
            display: inline-block;
            background-image: url(images/delete.png);
            background-size:cover;
            float: right;
            position: absolute;
            z-index: 5;
            top:31px;
            right: 45px;
            width: 1.5rem;
            height: 1.5rem;
            opacity: 0;
            filter: alpha(opacity=0);
        }
        .boxdel:hover:before {
            opacity: 100;
            filter: alpha(opacity=0);
            cursor: pointer;
        }
        /*end*/
        #img-box li {
            display: inline-block;
            position: relative;
        }

js:

 //-----------当选中图片时显示图片----------------
    var input=document.getElementById("uploadfile");
    var div;
    var filelist=[];
    var formdata=new FormData();

    console.log(formdata);
    // 当用户上传时触发事件
    input.onchange=function(){
        readFile(this);
    }

    //处理图片并添加到dom中的函数
    var readFile=function(obj){
        // 获取input里面的文件组
        var fileList=obj.files;
        console.log(fileList);
        //对文件组进行遍历，可以到控制台打印出fileList去看看
        for(var i=0;i<fileList.length;i++){
            var reader= new FileReader();
            reader.readAsDataURL(fileList[i]);
            reader.filename = fileList[i].name;
            console.log(fileList[i]);
            filelist.push(fileList[i]);
            // 当文件读取成功时执行的函数
            reader.onload=function(e){
                // for(var i=0;i<obj.files.length;i++){
                    console.log(obj.files.length)
                    console.log(this.filename);
                    var flies = this.filename.split(".")[1];
                    console.log(flies);
                    if(flies=="jpg"){
                        $(obj).val("");
                        $('#img-box').append('<li class="boxdel"><img style="vertical-align: top;"\n src="'+ this.result +'" alt="'+ this.name +'" class="layui-upload-img"></li>')
                    }else if(flies=="mp4") {
                        $('#img-box').append('<li class="boxdel"><video width="92" height="92" src="'+ this.result +'" type="video/mp4"> </video></li>')
                    } else {
                        return layer.msg('只支持jpg和mp4格式');
                    }
                // }

            }
        }

    }

    //----------删除选中的图片-----------
    $('#img-box').on('click','li',function () {
        $(this).toggleClass("delli");
        var delindex = $(this).index();
        filelist.pop(filelist[delindex]);
        console.log($(this).index())
        $('.delli').remove()
    })

    //--------------end-------------