JavaScript实现多图片上传、本地存储与动态展示教程-js教程-PHP中文网

JavaScript实现多图片上传、本地存储与动态展示教程

霞舞

发布： 2025-10-15 09:50:21

原创

952人浏览过

JavaScript实现多图片上传、本地存储与动态展示教程

本教程详细指导如何使用javascript处理html文件输入框的多图片上传，将图片数据以data url形式存储到浏览器的本地存储（localstorage）中，并在页面上动态展示这些图片，为构建图片画廊或简易图片轮播功能提供基础。

在现代Web应用中，用户上传图片并进行展示是常见需求。传统方法可能涉及后端存储，但对于一些轻量级应用或需要客户端缓存的场景，利用浏览器本地存储（localStorage）直接保存图片数据是一种高效的解决方案。本文将详细介绍如何通过JavaScript实现多图片文件的选择、读取、本地存储以及动态展示。

1. HTML结构准备

首先，我们需要一个HTML文件输入框供用户选择图片，以及一个容器元素用于展示这些图片。为了能够选择多个文件，input 标签需要添加 multiple 属性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多图片上传与展示</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        h1 { color: #333; }
        #imageInput { margin-bottom: 20px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        #imageSlider {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
            border: 1px dashed #ccc;
            padding: 10px;
            min-height: 100px;
            background-color: #f9f9f9;
            border-radius: 5px;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            color: #888;
        }
        #imageSlider:empty::before {
            content: "此处将显示上传的图片";
            font-style: italic;
        }
        #imageSlider img {
            border: 1px solid #eee;
            padding: 5px;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
            border-radius: 3px;
            object-fit: cover; /* 确保图片覆盖指定区域 */
        }
    </style>
</head>
<body>
    <h1>图片上传与本地存储展示</h1>
    <input type="file" id="imageInput" accept="image/*" multiple>
    <div id="imageSlider">
        <!-- 图片将在此处动态加载 -->
    </div>

    <script src="app.js"></script>
</body>
</html>

登录后复制

id="imageInput"：用于JavaScript中获取该文件输入元素。
accept="image/*"：限制文件选择器只显示图片文件类型。
multiple：允许用户一次选择多个文件。
id="imageSlider"：作为图片展示的容器。

2. JavaScript核心逻辑实现

接下来是JavaScript部分，它负责处理文件选择、读取、存储和显示。我们将把所有JavaScript代码放在一个名为 app.js 的文件中，并在HTML中引用。

2.1 数据初始化与本地存储管理

我们需要一个数组来存储所有图片的Data URL，并确保这个数组在页面加载时能从 localStorage 中恢复，并在每次图片更新时保存回 localStorage。

立即学习“Java免费学习笔记（深入）”；

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

// app.js

// 从localStorage加载图片数组，如果不存在则初始化为空数组
var images = JSON.parse(localStorage.getItem('images')) || [];

/**
 * 将当前图片数组保存到localStorage。
 * 图片数据以Data URL字符串形式存储。
 */
function saveImages() {
    localStorage.setItem('images', JSON.stringify(images));
}

登录后复制

JSON.parse(localStorage.getItem('images')): 尝试从 localStorage 获取名为 images 的数据，并将其从JSON字符串解析回JavaScript数组。
|| []: 如果 localStorage 中没有 images 数据（或解析失败），则初始化 images 为一个空数组。
saveImages(): 将 images 数组转换为JSON字符串，然后存入 localStorage。这是确保数据持久化的关键步骤。

2.2 动态渲染图片

drawImages() 函数负责清空图片容器，并根据 images 数组中的Data URL数据重新渲染所有图片。

/**
 * 遍历图片数组，在页面上动态创建并显示图片。
 */
function drawImages() {
    var slider = document.getElementById('imageSlider');
    slider.innerHTML = ''; // 清空现有内容，防止重复添加

    // 遍历图片数组，为每张图片创建img元素
    images.forEach(function(imgSrc) {
        const html_img = document.createElement('img');
        html_img.src = imgSrc; // Data URL 作为图片的源
        html_img.alt = 'Uploaded Image';
        html_img.width = 200; // 设置固定宽度
        html_img.height = 150; // 设置固定高度，保持一致性
        slider.appendChild(html_img);
    });
}

登录后复制

2.3 处理文件输入事件

当用户通过文件输入框选择文件后，change 事件会被触发。我们需要读取这些文件，将其转换为Data URL，然后添加到 images 数组中，并更新显示和存储。

// 获取文件输入框元素
const imageInput = document.querySelector("#imageInput");

// 监听文件输入框的change事件
imageInput.addEventListener("change", function(event) {
    const files = event.target.files; // 获取所有选中的文件

    // 如果没有文件被选中，则直接返回
    if (!files.length) {
        return;
    }

    // 遍历所有选中的文件
    Array.from(files).forEach(file => {
        const reader = new FileReader(); // 创建FileReader实例

        // 当文件读取完成时触发
        reader.onload = function(e) {
            images.push(e.target.result); // 将Data URL添加到图片数组
            saveImages(); // 保存到localStorage
            drawImages(); // 更新页面显示
        };

        // 读取文件内容为Data URL
        reader.readAsDataURL(file);
    });
});

登录后复制

event.target.files: 这是一个 FileList 对象，包含了用户选择的所有文件。
Array.from(files).forEach(): 将 FileList 转换为数组以便使用 forEach 方法遍历。
FileReader: 用于异步读取文件内容。
reader.onload: 当文件读取操作完成时触发。e.target.result 包含了读取到的文件内容，对于 readAsDataURL 来说，这就是图片的Data URL。
reader.readAsDataURL(file): 将文件内容读取为Data URL格式的字符串。

2.4 页面加载时初始化

为了在页面首次加载或刷新时能够显示之前保存的图片，我们需要在 DOMContentLoaded 事件中调用 drawImages() 函数。

// 页面完全加载和解析DOM后执行
document.addEventListener("DOMContentLoaded", drawImages);

登录后复制

3. 完整代码示例

将上述所有JavaScript代码整合到 app.js 文件中：

// app.js

// 1. 数据初始化与本地存储管理
var images = JSON.parse(localStorage.getItem('images')) || [];

function saveImages() {
    localStorage.setItem('images', JSON.stringify(images));
}

// 2. 动态渲染图片
function drawImages() {
    var slider = document.getElementById('imageSlider');
    slider.innerHTML = ''; // 清空现有内容

    // 如果没有图片

登录后复制

以上就是JavaScript实现多图片上传、本地存储与动态展示教程的详细内容，更多请关注php中文网其它相关文章！