图片预览

最新推荐文章于 2025-03-24 17:32:50 发布

ruby_xc

最新推荐文章于 2025-03-24 17:32:50 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签：图片

本文链接：https://blog.youkuaiyun.com/ruby_xc/article/details/78201873

前端学习专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一个简单的HTML与JavaScript结合的文件预览功能实现方案。通过使用File API，用户可以在上传图片文件后立即在网页上看到该图片的预览效果。此功能适用于需要即时反馈的应用场景，如头像上传、证件照片确认等。

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

<body>
<input type="file" name="file" onchange='show(this)'/>
<img id="img" src="" width="70" height="85"/>
<script type="text/javascript">
function show(img){
    var file = img.files[0];
    if(window.FileReader){
        var fr = new FileReader();
    console.log(fr)
        fr.onloadend = function(e){
            document.getElementById('img').src=e.target.result;
        };
        fr.readAsDataURL(file);
    }
}
</script>
</body>