html-实现图片的预览功能

最新推荐文章于 2024-09-05 16:19:18 发布

cnkeysky

最新推荐文章于 2024-09-05 16:19:18 发布

阅读量5.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html/css 文章标签： html 图片预览

本文链接：https://blog.youkuaiyun.com/cnkeysky/article/details/86747684

html/css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现文件上传功能，并实时预览上传的图片。通过监听input元素的onchange事件，利用FileReader读取文件内容并显示为图片源，同时在进度条上更新文件读取进度。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>HelloWorld</title>
    <style>

    </style>
</head>
<body>
<input type="file">
<br>
<progress max="100" value="0"></progress>
<br>
<img src="" alt="">
<script>
    let input = document.querySelector("input");
    input.onchange = function () {
        let img = document.querySelector("img");
        let progress = document.querySelector("progress");
        let reader = new FileReader();
        let file = this.files[0];
        reader.readAsDataURL(file);
        reader.onload = function () {
            img.src = this.result;
        };
        reader.onprogress = function (ev) {
            ev = ev || window.event;
            progress.value = ev.loaded / ev.total * 100;
        }
    };
</script>
</body>
</html>