html点击上传图片，并显示

最新推荐文章于 2025-06-06 11:13:40 发布

原创最新推荐文章于 2025-06-06 11:13:40 发布 · 2.6w 阅读

53 ·

CC 4.0 BY-SA版权

本文介绍了一种在前端开发中实现图片预览的方法，通过监听文件输入改变事件，使用FileReader API读取图片文件并将其显示在页面上。这种方法适用于需要即时预览上传图片的应用场景。

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

 <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>

监听input 改变事件

 function showImg(){
            // var img_file =  $("#img_file").val();
            var file =  document.getElementById('img_file').files[0];
            var re = new FileReader();
            re.readAsDataURL(file);
            re.onload = function(re){
                $('#img_id').attr("src", re.target.result);
            }
        }