上传图片预览

最新推荐文章于 2022-07-07 16:16:13 发布

clm_comeback

最新推荐文章于 2022-07-07 16:16:13 发布

阅读量114

点赞数

分类专栏： demo 文章标签：上传图片预览

本文链接：https://blog.csdn.net/clm_comeback/article/details/89532386

版权

demo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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 src="./jquery-3.1.1.min.js"></script>
    <style>
        .a_wrap{
            float: left;
            position: relative;
            cursor: pointer;
        }
        .delImg{
            position: absolute;
            color: #f00;
            margin: 0 0 0 60px;
            font-size: 10px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            vertical-align: middle;
            background-color: #c3c3c3;
        }
        #imgs{
            margin-top: 10px;
        }
        img{
            width: 80px;
            height: 80px;
            margin-right: 10px;
        }
        /* #showImg{
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            background: rgba(0, 0, 0, 0.2)
        }
        #bigImg{
            width: 200px;
            height: 200px;
        } */
    </style>
</head>
<body>
    <input type="file" name="uploadfile" id="uploadfile" multiple="multiple" accept=".jpg,.jpeg">  
    <div id="imgs"></div>
    <!-- <div style="display:none" id="showImg" onclick="showImg()"><img src='' id="bigImg"></div> -->
    <script>
        function delImage(obj,a){
            obj.parentNode.parentNode.removeChild(obj.parentNode); //删除图片
            console.log(obj)
            console.log(a)
        }
        // function bigImg(obj){//图片放大显示
        //     $("#bigImg").attr('src',obj.src)
        //     $("#showImg").css('display','block')
        // }
        // function showImg(){  //图片消失
        //     $("#showImg").css('display','none')
        // }
        $('#uploadfile').change(function(){
            var $file = $(this);
            var fileObj = $file[0];//可能选多张图片
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var imgsHtml = '';
            if (fileObj && fileObj.files && fileObj.files[0]) {
                for (var index = 0; index < fileObj.files.length; index++) {
                    imgsHtml += "<div class = 'a_wrap'><div class='delImg' onclick='delImage(this,"+index+")'>×</div>"+"<a href="+windowURL.createObjectURL(fileObj.files[index])+" target='view_window' class='_image_a'><img src ="+windowURL.createObjectURL(fileObj.files[index])+"></a></div>"
                }
                $("#imgs").html(imgsHtml);
            } 
    
         });
    </script>
</body>
</html>

clm_comeback

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上传图片预览

<!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-U...
复制链接

扫一扫

专栏目录