多图片上传并选择性移出_前端上传图片时钩子移出-CSDN博客

本文链接：https://blog.csdn.net/fw1025059398/article/details/82796960
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
    #fileList{
        width: 500px;
        height: 500px;
        background-color:pink;
    }
    #fileList img{
        display:block;
        float: left;
        width: 200px;
        height: 200px;
    }
    .div_item{
         position: relative;
         display: inline;
    }
    button{
    width: 25px;
    height: 25px;
    background-color: #F60;
    border: 0px none;
    border-radius: 5px;
    position: absolute;
    float: right;
    top: 0px;
    right: 0px;
    display: block;
    }
    </style>
</head>
<body>
    <input type="file" id="fileElem" multiple accept="image/*"  onchange="handleFiles(this)">
     <!-- <div id="fileList" style=""></div> -->
     <div id="fileList" style=""></div> <!-- width:200px;height:200px; -->
    
    <script>
        window.URL = window.URL || window.webkitURL;
        var fileElem = document.getElementById("fileElem");
        // var div_2 = document.getElementById('div_2');
       
        var button = `<button>删除</button>`
        fileList = document.getElementById("fileList");
        function handleFiles(obj) {
            var files = obj.files;
            var cba =document.createElement('button');
            cba.innerHTML= '删除'
            img = new Image();
            if(window.URL){
                //File API
                alert(files[0].name + "," + files[0].size + " bytes");
                img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
                img.width = 200;
                img.onload = function(e) {
                    window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
                }
                var div_2 =document.createElement('div');
                div_2.setAttribute('class','div_item');

                div_2.append(img);
                div_2.append(cba);
                fileList.appendChild(div_2);
                // fileList.appendChild(img);
                // fileList.appendChild(cba);
            }else if(window.FileReader){
                //opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
                var reader = new FileReader();
                reader.readAsDataURL(files[0]);
                reader.onload = function(e){
                    alert(files[0].name + "," +e.total + " bytes");
                    img.src = this.result;
                    img.width = 200;
                    // fileList.appendChild(img);
                    div_2.appendChild(img);
                }
            }else{
                //ie
                obj.select();
                obj.blur();
                var nfile = document.selection.createRange().text;
                document.selection.empty();
                img.src = nfile;
                img.width = 200;
                img.onload=function(){
                    alert(nfile+","+img.fileSize + " bytes");
                }
                // fileList.appendChild(img);
                div_2.appendChild(img);
            }
        }
        $('#fileList').on('click','button',function(e){
            // alert(e);
            $(this).parent().remove();

        })
    </script>
   
</body>
</html>