HTML5中实现相册图片切换有三种方法：一、多选input+索引控制，高效连贯；二、双隐藏input分别触发，精度高；三、拖拽DataTransfer动态加载，交互自然。
如果您在HTML5页面中使用JavaScript的FileReader API读取本地相册图片，但图片无法按预期切换显示，则可能是由于文件输入事件未正确绑定、FileReader读取逻辑未重置或图像DOM未动态更新所致。以下是实现相册图片逐张切换的具体方法：
一、通过input[type="file"]多选模式配合索引控制切换
该方法利用元素的multiple属性一次性选择多张图片，将所有File对象缓存为数组，再通过维护当前索引值实现前后切换。无需重复触发文件选择框，响应迅速且用户体验连贯。
1、在HTML中添加支持多选的文件输入控件和图片显示区域：
2、获取input元素并监听change事件，读取所有选中文件并存储为全局filesList数组：
const input = document.getElementById('albumInput');
let filesList = [];
let currentIndex = 0;
input.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
filesList = Array.from(e.target.files).filter(f => f.type.startsWith('image/'));
currentIndex = 0;
if (filesList.length > 0) showImage(currentIndex);
}
});
立即学习“前端免费学习笔记（深入）”；
3、定义showImage函数，使用FileReader同步读取指定索引的File对象，并将结果设为img的src：
function showImage(index) {
if (index = filesList.length) return;
const reader = new FileReader();
reader.onload = (e) => {
document.getElementById('previewImg').src = e.target.result;
};
reader.readAsDataURL(filesList[index]);
}
4、为上下按钮绑定点击事件，更新currentIndex并调用showImage：
document.getElementById('prevBtn').onclick = () => {
currentIndex = Math.max(0, currentIndex - 1);
showImage(currentIndex);
};
document.getElementById('nextBtn').onclick = () => {
currentIndex = Math.min(filesList.length - 1, currentIndex + 1);
showImage(currentIndex);
};
二、使用两个独立input分别绑定“上一张”与“下一张”触发逻辑
该方法规避索引管理，每个按钮对应一个隐藏的file input，点击时模拟点击对应input，用户每次手动选择单张图片，适合对切换精度要求高、需跳转任意图片的场景，且不依赖文件缓存顺序。
1、在HTML中声明两个隐藏file input（分别用于上一张和下一张）及对应按钮：
2、为两个input分别添加change事件监听器，读取各自选中的首个图片文件：
document.getElementById('prevFileInput').addEventListener('change', (e) => {
if (e.target.files[0]) {
const reader = new FileReader();
reader.onload = (ev) => {
document.getElementById('previewImg2').src = ev.target.result;
};
reader.readAsDataURL(e.target.files[0]);
}
});
document.getElementById('nextFileInput').addEventListener('change', (e) => {
if (e.target.files[0]) {
const reader = new FileReader();
reader.onload = (ev) => {
document.getElementById('previewImg2').src = ev.target.result;
};
reader.readAsDataURL(e.target.files[0]);
}
});
3、为按钮绑定点击事件，触发对应input的click行为：
document.getElementById('triggerPrev').onclick = () => {
document.getElementById('prevFileInput').click();
};
document.getElementById('triggerNext').onclick = () => {
document.getElementById('nextFileInput').click();
};
三、基于DataTransfer对象从拖拽区域动态切换图片
该方法支持用户直接将相册图片从文件管理器拖入网页指定区域，每拖入一张即自动切换显示，适用于桌面端相册快速浏览场景，无需点击任何按钮或输入框，交互自然。
1、创建拖拽容器并阻止默认行为：
2、为dropArea添加dragover和drop事件监听器，提取DataTransfer中的图片文件：
const dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragover', (e) => {
e.preventDefault();
});
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/'));
if (imageFiles.length > 0) {
const reader = new FileReader();
reader.onload = (ev) => {
document.getElementById('previewImg3').src = ev.target.result;
};
reader.readAsDataURL(imageFiles[0]);
}
});
