上传图片样式

最新推荐文章于 2024-07-22 08:55:10 发布

由良时雨

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量105

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_45444401/article/details/127850823

版权

.btn-box {
        position: relative;
    }

    .file-ipt {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0; //将input设为透明
    }

    .btn {
        width: 100px;
        height: 30px;
        background-color: skyblue;
        color: white;
        margin-right: 80px;
        border: none;
        border-radius: 10px;
    }
    .cover-img{
        width: 100px;
        height: 100px;
        border-radius: 0.26rem;
        overflow: hidden;
        position: relative;
        margin-top: 10px;
    }
    .cover-img img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

html

<button class="btn">上传图片</button>
<input type="file" id="file"  onchange="uploadImg(this)" accept="image/*" class="file-ipt">
<div style="display: none;" id="img-prize" class="cover-img">
<img id="img" src="">

function uploadImg(file){
            if (file.files && file.files[0])
            {
                var img = document.getElementById('img');
                var reader = new FileReader();
                reader.readAsDataURL(file.files[0]);
                reader.onloadend = function(e){
                    $('#img-prize').show();
                    img.src = e.target.result;
                }

            }
        }