【小朋友个人画廊html】

Ai君臣

已于 2024-07-16 15:07:54 修改

阅读量119

点赞数 1

文章标签： html 前端 javascript

于 2024-07-16 14:57:04 首次发布

本文链接：https://blog.csdn.net/liuchenbaidu/article/details/140466645

版权

为了实现图片上传后能够保存，并在页面刷新后仍然展示，可以使用浏览器的本地存储（LocalStorage）来存储图片数据。以下是完整的示例代码，将图片数据保存在本地存储中，并在页面加载时读取并展示这些图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Art Gallery</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        h1 {
            margin-top: 20px;
        }

        p {
            font-size: 18px;
        }

        input[type="file"] {
            font-size: 16px;
            padding: 10px;
            margin: 20px;
            cursor: pointer;
        }

        .gallery {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .gallery img {
            width: 200px;
            margin: 10px;
            border: 2px solid #ccc;
            transition: transform 0.2s;
        }

        .gallery img:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <h1>My Art Gallery</h1>
    <p>Upload a drawing to add it to the gallery!</p>
    <input type="file" accept="image/*" onchange="addDrawing(event)">
    <div class="gallery" id="gallery"></div>

    <script>
        const images = JSON.parse(localStorage.getItem('images')) || [];

        function addDrawing(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    images.push(e.target.result);
                    localStorage.setItem('images', JSON.stringify(images));
                    renderGallery();
                };
                reader.readAsDataURL(file);
            }
        }

        function renderGallery() {
            const gallery = document.getElementById('gallery');
            gallery.innerHTML = ''; // 清空画廊
            images.forEach(src => {
                const img = document.createElement('img');
                img.src = src;
                gallery.appendChild(img);
            });
        }

        // 页面加载时渲染画廊
        document.addEventListener('DOMContentLoaded', renderGallery);
    </script>
</body>
</html>

说明

HTML 结构：
- 一个标题 (<h1>)。
- 一个说明文本 (<p>)。
- 一个文件输入元素 (<input type="file" accept="image/*" onchange="addDrawing(event)">)，用于选择图片文件。当文件被选择时，调用 addDrawing(event) 函数。
- 一个用于展示图片的画廊容器 (<div class="gallery" id="gallery">)。
CSS 样式：
- 设置页面的字体、背景色、文本对齐和其他基本样式。
- 设置画廊图片的样式，包括大小、边框和悬停效果。
- 使用 display: flex 和 flex-wrap: wrap 来使画廊中的图片能够自动换行，并居中显示。
JavaScript 函数：
- 从本地存储中读取已保存的图片数据，并将其解析为数组 images。如果本地存储中没有数据，则初始化为空数组。
- addDrawing(event) 函数处理文件输入的 change 事件，使用 FileReader 对象读取文件，并在文件读取完成后将其数据保存到 images 数组中，并更新本地存储。然后调用 renderGallery 函数重新渲染画廊。
- renderGallery() 函数重新渲染画廊，通过遍历 images 数组，将每个图片数据创建为一个 <img> 元素，并添加到画廊容器中。
- 在页面加载时，通过 DOMContentLoaded 事件触发 renderGallery 函数，以确保页面刷新后仍能展示已上传的图片。

将以上代码保存为一个 HTML 文件，例如 index.html，然后在浏览器中打开这个文件，即可选择本地图片并将其显示在画廊中。每次上传新的图片，画廊会自动更新并展示所有图片，并在页面刷新后仍然展示已上传的图片。
手把手教程：

和她一起一步步完成这个项目，可以让她对代码和效果之间的关系有初步的了解。
展示和奖励：

在她完成某些小任务后，可以展示成果，并给予小奖励，以激发她的兴趣和成就感。
故事化学习：

将网页设计过程故事化，例如“我们来创建一个可以展示你所有画作的魔法画廊吧！”让她觉得这是一个有趣的探险。

Ai君臣

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【小朋友个人画廊html】

为了实现图片上传后能够保存，并在页面刷新后仍然展示，可以使用浏览器的本地存储（LocalStorage）来存储图片数据。以下是完整的示例代码，将图片数据保存在本地存储中，并在页面加载时读取并展示这些图片。
复制链接

扫一扫