上传图片并展示出来

效果：

 

 代码：

<html>

<head>
    <title>尝试</title>
    <script src="js/jquery.js"></script>
</head>

<body>

    <div class="layui-form-item">
        <label class="layui-form-label">图片地址</label>
        <div class="layui-input-block">
            <input type="hidden" id="img_url">
            <input type="file" onchange="showImg()" id="img_file"><img src="" alt="" id="img_id" style="width: 100px">
        </div>
    </div>

</body>

</html>
<script type="text/javascript">
    function showImg() {
        var file = document.getElementById('img_file').files[0];
        var re = new FileReader();
        re.readAsDataURL(file);
        re.onload = function(re) {
            console.log(re)
            $('#img_id').attr("src", re.target.result);
        }
    }
</script>

参考：https://blog.csdn.net/yzwdzkn/article/details/99876499

posted @ 2020-07-30 17:35  碧果果  阅读(174)  评论(0)  编辑  收藏  举报