图片预览

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

原创最新推荐文章于 2025-03-24 17:32:50 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片

前端学习专栏收录该内容

37 篇文章

订阅专栏

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

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