• 原生JS上传图片视频,可预览删除(待)


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传</title>
    <!-- <script src="jquery-3.4.1.min.js"></script> -->
    <style>
    #file-list{
        display: flex;
        flex-wrap: wrap;
    }
    #file-list li{
        list-style: none;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
         150px;
        height: 150px;
        line-height: 150px;
        font-size: 14px;
        color: #fff;
        border-radius: 4px;
        margin: 0 6px 6px 0;
        background: #ededed;
        overflow: hidden;
        overflow: hidden;
    }
    #file-list li .img-misk{
        position: absolute;
        top: 0;
        left: 0;
         100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        transition: all .3s;
        opacity: 0;
    }
    #file-list li:hover .img-misk{
        opacity: 1;
    }
    #file-list li span{
        margin: 0 4px;
        cursor: pointer;
    }
    #file-list li img{
        max- 100%;
    }
    
    </style>
    </head>
    <body>
        <div>
            <div id="showimg">
                <ul id="file-list"></ul>
                <label for="upgteimg">Select some files</label>
                <input type="file" id="upgteimg" value="" multiple="multiple" hidden/>
            </div>
        </div>
    <script>
    window.onload = function () {
        let readFile = document.querySelector("#upgteimg"),
            showui = document.querySelector("#file-list"),
    
            dataObj = {},
            index = 0,
    
            imgDele = readFile.querySelector('.delete'),
            imgView = readFile.querySelector('.view');
    
        // 上传图片
        readFile.addEventListener('change', function(){
            for (let i = 0; i < this.files.length; i++) {
                let url = URL.createObjectURL(this.files[i])
                let reader = new FileReader();
                let file = this.files[i];
    
                index++;   // image index
    
                reader.readAsDataURL(this.files[i]);
     
                (function(index){
                    reader.onload = (e) => {
                        let result = `<li data-id="${index}" data-url="${url}">
                                    <div class="img-misk">
                                        <span class="view" data-id="${index}">查看</span>
                                        <span class="delete" data-id="${index}">删除</span>
                                    </div>
                                    <img class="showimg" src="${url}"/>
                                </li>`;
                        showui.innerHTML += result;
                        dataObj[index] = url;
                    }
                })(index)
            }
        })
    
        // if (!readFile['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)) {
        //     return alert("格式");
        // }
    
        // 操作图片
        showui.addEventListener('click', function(e){
            var e = e || window.event,
                target = e.srcElement || e.target,
                index = target.getAttribute('data-id'),
                name = target.className;
            switch(name){
                case 'delete':
                    return deleteImg(index)
                case 'view':
                    return viewImg(index)
            }
        })
    
        // delete image
        function deleteImg(index){
            let oLi = document.querySelectorAll("li");
            oLi.forEach(item => {
                if(item.dataset.id == index) return item.remove();
                console.log(index)
            })
            delete dataObj[index];
        }
    
        // view image
        function viewImg(index){
    
    
            document.body.appendChild("<div>2</div>");
    
    
    
            console.log(index)
        }
    
    
    }
    </script>
    </body>
    </html>
    
  • 相关阅读:
    面试只要问到分布式,必问分布式锁
    Java编程中忽略这些细节,Bug肯定找上你
    不止承上启下,带你了解工业物联网关
    论文解读二十七:文本行识别模型的再思考
    并发高?可能是编译优化引发有序性问题
    论文解读丨LayoutLM: 面向文档理解的文本与版面预训练
    SQL优化老出错,那是你没弄明白MySQL解释计划
    SQL反模式学习笔记1 开篇
    SQL Server中自定义函数:用指定的分隔符号分割字符串
    .NET软件开发与常用工具清单
  • 原文地址:https://www.cnblogs.com/xiaobaiv/p/12720481.html
Copyright © 2020-2023  润新知