input 上传图片隐藏按钮

最新推荐文章于 2023-02-16 10:37:57 发布

qq_57657160

最新推荐文章于 2023-02-16 10:37:57 发布

阅读量375

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_57657160/article/details/126586285

版权

js代码
<script>
$(document).on("click", "#btn", function () {
    $('.file-upload').click();
    $(document).on("change", ".file-upload", function () {
        var fileObj = $(".file-upload")[0];
        var img = document.getElementById('btn'); 
        var reader = new FileReader();
        reader.onload = function(e) {
            if (reader.readyState === 2) { 
                img.src = e.target.result;
                console.log(img.src);
            }
        }
        reader.readAsDataURL(fileObj.files[0]);
    });
});

</script>

html 代码

 <div class="pt-4 pb-5">
     <img src="/static/images/add_img.jpeg" class="img-fluid img-center" style="height: 150px;  alt="" id="btn"/>
     <input class="file-upload" style="display:none;" type="file" accept="image/*" name="picture"/>
  </div>