js显示本地上传的图片及图标的改变

最新推荐文章于 2024-08-24 08:28:00 发布

lxiang222

最新推荐文章于 2024-08-24 08:28:00 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 上传图片 label

本文链接：https://blog.youkuaiyun.com/lxiang222/article/details/72904157

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种通过点击头像实现上传并替换原有头像的方法。利用JavaScript读取用户选择的文件，并预览即将替换的新头像。同时通过CSS隐藏文件输入框，仅展示头像。

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

今天课设碰到一个问题，需要用户点击自己图像从本地上传图像并覆盖原来的图像，该如何把上传的图像显示出来，在网上百度后找到一个相对易理解的，经过稍加修改后的代码如下：


<script type="text/javascript">
    function showpic(){
        //获取上传文件的信息
        var pic =document.getElementById('pic').files[0];
        console.log(pic);

        //在pic的文件里抓取该文件用于显示二进制信息
        var sr  = window.URL.createObjectURL(pic);
        console.log(sr);
        //设置src属性，显示图片
        document.getElementsByTagName('img')[0].src=sr;
    }
</script>

主要是用这个js代码来实现显示图片的需求，可以读取了上传图片的地址后就好办了，下来我要实现点击头像上传新的头像，我在html中设置了label标签，让它的for属性指向input type=file，因为我要实现点击图像上传所以我要让原来的样式消失，刚开始我让input标签的透明度为0，但这个只是在界面上看起来不存在了，实际上还是占据了宽高只是看不到而已，如果点击了那个位置还是会弹出上传的界面，于是我设置了display：none这样就达到了我想要的效果，代码如下：

input{
        display: none;
}
label{
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}
<input type="file" name="img" id="pic" onchange="showpic()"/>
<label for="pic"><img src="C:\Users\珊瑚海的约定\Desktop\222.png" alt="" /></label>