JavaScript 实现上传图片预览功能

最新推荐文章于 2023-08-03 17:19:14 发布

火星飞鸟

最新推荐文章于 2023-08-03 17:19:14 发布

阅读量142

点赞数 2

分类专栏：前端基础 JavaScript 文章标签： FileReader HTML 图片预览数据URL 用户上传

本文链接：https://blog.csdn.net/Jack_lzx/article/details/109709857

版权

前端基础同时被 2 个专栏收录

111 篇文章 2 订阅

订阅专栏

JavaScript

88 篇文章 1 订阅

订阅专栏

实现效果：

在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box,
        .preview {
            height: 300px;
        }
    </style>
</head>

<body>
    <input class="file" type="file" multiple>
    <div class="box">
        <img src="" alt="" class="preview">
    </div>
    <script>
        var file = document.querySelector('.file');
        var preview = document.querySelector('.preview');
        // 当选择完文件之后
        file.onchange = function() {
            // 创建文件读取对象
            var reader = new FileReader();
            // files是用户选择的文件列表，files[0]第一个文件
            // 读取文件
            reader.readAsDataURL(this.files[0]);
            // 监听onload事件
            reader.onload = function() {
                // 将文件读取结果显示在页面中
                preview.src = reader.result;
            }
        }
    </script>
</body>

</html>

火星飞鸟

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 实现上传图片预览功能

实现效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box
复制链接

扫一扫