html + js 实现图片预览

最新推荐文章于 2024-07-29 15:03:08 发布

遐光

最新推荐文章于 2024-07-29 15:03:08 发布

阅读量332

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43169879/article/details/106579470

版权

本文详细介绍了如何使用HTML和JavaScript实现图片预览功能。通过创建一个隐藏的img元素，利用FileReader API读取文件内容并显示在该元素上，用户可以即时看到所选图片的预览效果，提升网页交互体验。

摘要由CSDN通过智能技术生成

<div class="form-group">
    <label for="exampleInputFile">文章封面</label>
    <input type="file" accept="image/*" id="file">
    <div class="thumbnail-waper">
        <img class="img-thumbnail" src="" id="preview">
    </div>
</div>
<script>
        //预览图片
        $('#file').on('change', function() {
   
            let reader = new FileReader();
            reader.readAsDataURL($(this).get(0).files[0]