JS图片更换显示，上传图片INPUT标签样式

最新推荐文章于 2022-09-04 23:14:14 发布

Arain_wg

最新推荐文章于 2022-09-04 23:14:14 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：编程学习

本文链接：https://blog.youkuaiyun.com/Arain_wg/article/details/81983660

编程学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS样式美化上传图片的INPUT标签，通过将其置于A标签内并定制CSS，提升界面美观度。接着，文章讲解了使用JS实现图片更换并在页面上实时显示的代码实现，提供了一个简单的JS代码示例。

1.上传图片INPUT标签样式

一般input标签样式不好调整，样式呆板，那么可以使用一些CSS样式来对其样式进行调整，在达到想要效果的同时，样式也更加美观。一般是将该input标签放在a标签中，再来调整其css样式。

css样式

#imgStylebutton{
            height: 20px;
            width: 80px;
            line-height: 35px;
            background-color: #6495ED;
            color: #ffffff;
            padding: 4px 10px;
            font-size: 16px;
            border-radius: 5px;
            text-decoration: none;
        }
#uploadImg{
            position: absolute;
            overflow: hidden;
            left:608px;
            opacity: 0;
        }

html标签

        <form action="" method="post" enctype="multipart/form-data">
            <table>
                <tr>
                    <td id="imgStyle"><img id="img" src="images/text01.jpg"></td>
                </tr>
                <tr>
                    <td height="50px" width="300px" align="center">
                        <a href="javascript:" id="imgStylebutton" >更换图片
                            <input type="file" id="uploadImg"  name="uploudImg" accept="image/*">
                        </a>
                    </td>
                </tr>
            </table>
        </form>

2.JS图片更换显示

更换图片后，回显至当前页面

js代码

<script>
    /*图片回显*/
    //在uploadImg元素上绑定change事件处理函数function
    $("#uploadImg").on("change",function(){
        //1.获取该图片对象
        var file = this.files[0];
        //2.创建FileReader对象
        var reader = new FileReader();
        //3.异步读取文件内容，结果用data:url的字符串形式表示
        reader.readAsDataURL(file);
        //4.当读取操作成功完成时调用onload
        reader.onload=function(e){
            //e.target.result图片地址
            //5.将img中src地址换成e.target.result
            $("#img").attr("src",e.target.result);
        }
    })
</script>