本教程详细指导如何使用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 = ''; // 清空现有内容
// 如果没有图片 
