使用 JavaScript 从输入字段创建图像数组并实现图像滑块_技术教程

本文将详细介绍如何使用 JavaScript 从文件输入字段获取多张图片，并将这些图片存储在本地存储中，最终实现一个简单的图片滑块功能。我们将学习如何读取文件、存储图像数据、以及动态创建和展示图像元素。

实现原理

核心思路是利用 HTML 的元素让用户选择图片，然后使用 FileReader 对象读取图片数据，将图片数据以 Data URL 的形式存储到 localStorage 中，最后从 localStorage 中读取图片数据，动态创建元素并添加到页面上，从而实现图片滑块的效果。

详细步骤

HTML 结构

首先，我们需要一个文件输入框和一个用于展示图片的容器。
- imageInput: 文件输入框，multiple 属性允许选择多个文件，accept="image/*" 限制只能选择图片文件。
- imageSlider: 用于展示图片的容器。

JavaScript 代码

接下来，我们编写 JavaScript 代码来实现图片读取、存储和展示。

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

// 保存图片数组到 localStorage
function saveImages() {
    localStorage.setItem('images', JSON.stringify(images));
}

// 绘制图片滑块
function drawImages() {
    var slider = document.getElementById('imageSlider');
    slider.innerHTML = ''; // 清空之前的图片

    for (var i = 0; i < images.length; i++) {
        const imgData = images[i];
        const img = document.createElement('img');
        img.src = imgData;
        img.alt = 'Image ' + (i + 1);
        img.width = 200; // 设置图片宽度
        img.height = 150; // 设置图片高度
        slider.appendChild(img);
    }
}

// 监听文件输入框的 change 事件
document.getElementById('imageInput').addEventListener('change', function() {
    const files = this.files;

    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();

        reader.addEventListener('load', function() {
            images.push(reader.result); // 将图片 Data URL 添加到数组
            saveImages(); // 保存图片数组到 localStorage
            drawImages(); // 重新绘制图片滑块
        });

        reader.readAsDataURL(file); // 读取文件数据
    }
});

// 在页面加载时绘制图片滑块
document.addEventListener('DOMContentLoaded', drawImages);

images 变量: 用于存储图片 Data URL 的数组。从 localStorage 中读取，如果不存在则初始化为空数组。
saveImages() 函数: 将 images 数组转换为 JSON 字符串并存储到 localStorage 中。
drawImages() 函数: 从 images 数组中读取图片 Data URL，动态创建元素，并添加到 imageSlider 容器中。
change 事件监听器: 监听文件输入框的 change 事件，当用户选择文件后，循环遍历选择的文件，使用 FileReader 读取每个文件的数据，当读取完成后，将 Data URL 添加到 images 数组，保存 images 数组到 localStorage，并调用 drawImages() 函数重新绘制图片滑块。
DOMContentLoaded 事件监听器: 在页面加载完成后，调用 drawImages() 函数绘制图片滑块，显示之前存储的图片。

代码解释

FileReader 对象: 用于读取文件内容。readAsDataURL() 方法将文件读取为 Data URL，Data URL 是一种将文件内容编码为字符串的格式，可以直接嵌入到 HTML 中。
localStorage: 用于在浏览器中存储数据。setItem() 方法用于存储数据，getItem() 方法用于读取数据。 localStorage 存储的数据是持久的，即使关闭浏览器，数据仍然存在。
JSON.stringify() 和 JSON.parse(): 用于将 JavaScript 对象转换为 JSON 字符串，以及将 JSON 字符串转换为 JavaScript 对象。 localStorage 只能存储字符串，因此需要使用这两个方法进行转换。