(移动端)图片上传效果

最新推荐文章于 2024-05-25 09:36:29 发布

萧逸才

最新推荐文章于 2024-05-25 09:36:29 发布

阅读量3.2k

点赞数

分类专栏：前端 css3 jquery 文章标签： css3 jquery 图片上传

本文链接：https://blog.csdn.net/xyc_csdn/article/details/70039047

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

jquery

12 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            padding: 10px;
        }

        .uploader-box {
            width: 80px;
            height: 80px;
            border: 1px solid #D9D9D9;
            position: relative;
            display: inline-block;
            float: left;
            margin: 5px;
        }

        .uploader-input {
            opacity: 0;
            width: 100%;
            height: 100%;
        }

        .uploader-plus::before {
            content: " ";
            width: 2px;
            height: 40px;
            background-color: #D9D9D9;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .uploader-plus::after {
            content: " ";
            width: 40px;
            height: 2px;
            background-color: #D9D9D9;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .uploader-minus::after {
            content: " ";
            width: 40px;
            height: 2px;
            background-color: #D9D9D9;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .uploader-img {
            width: 100%;
            height: 100%;
        }

        .uploader-progress::before {
            content: " ";
            border: 40px solid #000;
            position: absolute;
            opacity: 0.5;
        }

        .uploader-progress::after {
            content: attr(data-progress);
            position: absolute;
            color: #ffffff;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .uploader-plus, .uploader-minus, .uploader-input, .uploader-delete {
            cursor: pointer;
        }

        .uploader-delete::before {
            content: " ";
            border: 40px solid #000;
            position: absolute;
            opacity: 0.5;
        }

        .uploader-delete::after {
            content: "×";
            position: absolute;
            right: 0%;
            margin-right: 5px;
            color: #ffffff
        }
    </style>
</head>
<body>
<div class="uploader_file">
    <div class="uploader-box uploader-plus">
        <input id="uploader_input" class="uploader-input" accept="image/*" multiple="" type="file">
    </div>
    <div class="uploader-box uploader-minus">
    </div>
</div>
</body>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        if (typeof(FileReader) === 'undefined') {   //如果不支持FileReader
            alert("抱歉，你的浏览器不支持FileReader，请使用现代浏览器操作！");
            $("#uploader_input").attr('disabled', 'disabled');
        } else {
            uploaderChange();
            deleteUploadImg();
        }

        $(document).bind('click', function (e) {    //文档绑定点击事件
            if (!$(e.target).attr("class") || $(e.target).attr("class").indexOf("uploader-input") != -1) {  //如果点击的是其它区域
                $(".uploader-plus").show(); //显示加号
                $(".uploader-delete").each(function () {    //取消删除模式
                    $(this).removeClass("uploader-delete");
                });
            }
        });
    });

    /**
     * 上传图片
     */
    function uploaderChange() {
        $("#uploader_input").change(function () {
            var file = this.files[0];
            if (!/image\/\w+/.test(file.type)) {//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                alert("请确保文件为图像类型");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //插入图片
                var index = $(".uploader-img").length + 1;
                $(".uploader-plus").before("<div id='img_" + index + "' class='uploader-box uploader-progress' data-progress='0%'><img class='uploader-img' src='" + this.result + "'/></div>");
                uploading("img_" + index);
            }
        });
    }

    function deleteUploadImg() {
        $(".uploader-minus").click(function () {    //点击减号进入图片删除模式
            var $uploaderItem = $(".uploader-item");
            if ($uploaderItem.length == 0) {
                return;
            }
            $(".uploader-plus").hide();
            $uploaderItem.each(function () {
                $(this).addClass("uploader-delete");
            });
        });

        $(".uploader_file").delegate(".uploader-delete", "click", function (e) {    //点击图片进行删除
            $(this).remove();
            if ($(".uploader-delete").length == 0) {
                $(".uploader-plus").show();
            }
            stopPropagation(e); //阻止事件冒泡
        });
    }

    /**
     * 显示上传进度
     * @param imgId
     */
    function uploading(imgId) {
        var $img = $("#" + imgId);
        var interval = setInterval(function () {
            var progress = parseInt($img.attr("data-progress")) + 1;
            $img.attr("data-progress", progress + "%");
            if (progress == 100) {
                clearInterval(interval);
                $img.removeClass("uploader-progress");
                $img.addClass("uploader-item");
                if ($(".uploader-plus").is(":hidden")) {
                    $img.addClass("uploader-delete");
                }
            }
        }, 100);
    }

    /**
     * 阻止事件冒泡
     * @param e
     */
    function stopPropagation(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    }

</script>
</html>

这里写图片描述

萧逸才

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
(移动端)图片上传效果

<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin: 0px; padding: 0px; }
复制链接

扫一扫