图片上传和删除

最新推荐文章于 2024-05-21 19:09:41 发布

yuanliy

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量5k

点赞数

分类专栏： jquery 文章标签： javascript 前端开发语言

原文链接：https://blog.51cto.com/niuben/3028616

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简单的相关链接：https://blog.51cto.com/niuben/3028616?abTest=51cto

<div id="bcd"></div>
<input type="file" id="abc">

  $(function() {
        $("#abc").change(function(e) {
            var imgBox = e.target;
            uploadImg($('#bcd'), imgBox)
        });

        function uploadImg(element, tag) {
            var file = tag.files[0];
            var imgSrc;
            if (!/image\/\w+/.test(file.type)) {
                alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                console.log(this.result);
                imgSrc = this.result;
                var imgs = document.createElement("img");
                $(imgs).attr("src", imgSrc);
                element.append(imgs);
            };
        }
    })

多张相关链接：https://blog.csdn.net/qq_43404873/article/details/111405627

<!DOCTYPE html>
<html lang="en">

<link>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<link rel="stylesheet" href="../static/css/me.css"></link>
</head>
<style>
    .center {
        text-align: center;
        margin-top: 30px;
    }
</style>

<body>
    <!-- 中间内容 -->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <form class="ui form">
                <div class="field">
                    <label>标题</label>
                    <input type="text" name="text" placeholder="标题">
                </div>
                <div class="field">
                    <input type="file" multiple id="upload_file" name="files" style="display: none;">
                    <div class="imageContainer">
                        <div class="ui centered image" style="width:150px; height: 150px; background-color: white; border: 2px dashed black; display: inline-block;">
                            <div class="center">
                                <img src="../static/images/add.png" alt="" class="ui  mini centered image">
                                <p style="margin-top: 8px;" id="uploadMoreImages">上传图片</p>
                            </div>
                        </div>

                    </div>

                </div>

                <button class="ui button" type="submit">上传</button>
        </div>
        </form>
    </div>
    </div>
</body>

</html>

 	.m-padded-tb-big {
        padding-top: 3em !important;
        padding-bottom: 3em !important;
    }
    
    .m-container-small {
        max-width: 60em !important;
        margin: auto !important;
    }


    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
    <script>
        $('.menu_toggle').click(function() {
            $(".m-item").toggleClass('m-mobile-hide')
        })
        $(".center").click(function() {
            $("#upload_file").click();
        })
        var img
        $("#upload_file").change(function() {
            var images = []; //定义一个空的数组用来储存img路径
            var files = $(this).get(0).files;
            console.log(files)
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; //只能上传图片
            $($(this)[0].files).each(function() {
                var file = $(this);
                console.log(file)
                if (regex.test(file[0].name.toLowerCase())) {
                    //如果是图片
                    var reader = new FileReader();
                    reader.onload = function(e) { //读取图片成功会执行这个函数
                        var div = $("<div></div>")
                        div.attr("style", "position: relative; display:inline-block;")
                        var delImg = $("<img/>")
                        delImg.attr("style", "position: absolute; right: 15px; top: 15px; width: 20px;height: 20px; z-index:1; display:none;")
                        delImg.attr("src", "../static/images/delete3.png")
                        delImg.attr("class", "delImg")

                        var img = $("<img />");
                        img.attr("style", "display: inline-block; height:150px; margin:8px;");
                        img.attr("src", e.target.result);
                        img.attr("class", "ui small centered image")
                        div.append(delImg)
                        div.append(img);
                        $(".imageContainer").prepend(div);
                    }
                    reader.readAsDataURL(file[0]);
                    $("#uploadMoreImages").text("上传更多图片")
                } else {
                    alert(file[0].name + "不是一张图片");
                    return false;
                }
            })
        })

        //鼠标悬浮显示删除按钮
        $(".imageContainer").on("mouseover mouseout", "img", function(event) {
            // console.log($(this).prev()[0])
            if (event.type == "mouseover") {
                //鼠标悬浮
                $($(this).prev()[0]).show();
            } else if (event.type == "mouseout") {
                //鼠标离开
                $($(this).prev()[0]).hide();
            }
        })

        //删除图片
        $(".imageContainer").on("click", ".delImg", function() {
            $($(this).next()[0]).remove();
        })
    </script>