前端页面上传图片并回显

最新推荐文章于 2024-03-05 16:15:11 发布

原创最新推荐文章于 2024-03-05 16:15:11 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

上传图片

4 篇文章

订阅专栏

这篇博客介绍了如何仅使用前端JavaScript（jQuery）来实现图片上传并实时回显的功能。通过HTML页面和JS文件的结合，实现了上传按钮、图片预览及文件选择的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只用前端js。jquery。

前端html

<style>

    .uploadImgBtn {
        border: black solid 1px;
        width: 200px;
        height: 200px;
        cursor: pointer;
        position: relative;
        background-image: url("12.jpg");
        -webkit-background-size:  cover;
        background-size: cover;
    }
    .uploadImgBtn .uploadImg {
        position: absolute;
        right: 0;
        top:0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    /*这是一个用做回显的盒子的样式*/
    .pic{

        width: 100px;
        height: 100px;
    }
    .pic img {
        border: saddlebrown solid 2px ;
        width: 200px;
        height: 200px;
    }
</style>

别忘了引入js文件

 <script>
    $(document).ready(function(){
        $("#uploadImgBtn").click(function(){
            var $input = $("#file");
            console.log($input)
            $input.on("change" , function(){
                console.log(this)
                var files = this.files;
                var length = files.length;
                console.log("选择了"+length+"张图片");
                //3、回显
                $.each(files,function(key,value){
                    //每次都只会遍历一个图片数据
                    var div = document.createElement("div"),
                        img = document.createElement("img");
                    div.className = "pic";

                    var fr = new FileReader();
                    fr.onload = function(){
                        img.src=this.result;
                        div.appendChild(img);
                        document.body.appendChild(div);
                    }
                    fr.readAsDataURL(value);
                })

            })

            //4、我们把当前input标签的id属性remove
            $input.removeAttr("id");
            //我们做个标记，再class中再添加一个类名就叫test
            var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
            $(this).append($(newInput));

        })

    })

</script>