文章 - 很简单的图片多图片上传预览功能。小白都能看懂的代码

html 代码

<html>

<head>
        <meta charset="utf-8" />
        <title>图片上传预览/删除/放大</title>
        <style type="text/css">
            .img-cont {
                width: 1000px;
                height: 570px;
                border: 2px solid #317ef3;
                margin: 50px auto;
            }

.img-cont>div {
                width: 300px;
                height: 260px;
                border: 1px solid #777;
                float: left;
                margin: 20px 0 0 20px;
            }

.img-cont>div>div {
                width: 300px;
                height: 220px;
                border: 1px solid red;
            }

.img-cont>div>a {
                width: 60px;
                height: 30px;
                border-radius: 4px;
                line-height: 30px;
                text-align: center;
                color: #fff;
                display: block;
                background: #317ef3;
                margin: 5px 0 0 0px;
                cursor: pointer;
            }

#bigimg {
                position: fixed;
                top: 50%;
                left: 50%;
                border: 1px solid red;
                width: 300px;
                height: 300px;
                display: none;
            }
        </style>
    </head>

<body>

</div>
        </center>

<script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            //////定义上传方法函数
            var id = "1";

//重置表单,允许用户连续添加相同的图片
            function resetForm(imgFile) {
                $(imgFile).parent()[0].reset();
            }
            //删除图片

//控制"按钮"显示与隐藏
            $(".img-cont").off("mouseenter", "div").on("mouseenter", "div", function() {
                var that = this;
                var dom = $(that).children("a");
                dom.removeClass("hide");
                //为点击事件解绑，防止重复执行
                dom.off("click");
                dom.on("click", function() {
                    //删除当前图片
                    dom.parent().remove();
                });

//放大图片
                var imgdom = $(that).children("img");
                imgdom.off("click");
                imgdom.on("click", function() {
                    //删除当前图片
                    $("#bigimg").html(" ")
                    $("#bigimg").show();
                    var imgclone = imgdom.clone();
                    $("#bigimg").append(imgclone);
                });
                $("#bigimg").click(function() {
                    $(this).hide();
                })
            })
        </script>

</body>

</html>

很简单的图片多图片上传预览功能。小白都能看懂的代码

评论 ( 0 )

最新评论

暂无评论

很简单的图片多图片上传预览功能。小白都能看懂的代码

评论 ( 0 )

最新评论

暂无评论

欢迎您回来

创建账号

找回密码