在HTML5开发中，使用JS的FileReader API可以很方便地读取用户本地相册中的图片，并在页面上切换显示。下面通过一个完整示例说明具体做法。
一、基本页面结构
我们需要一个文件选择框用来选本地图片，一个img标签显示当前图片，以及几个按钮控制上一张和下一张切换。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>本地相册切换</title> </head> <body> <input type="file" id="fileInput" accept="image/*" multiple> <br><br> <button id="prevBtn">上一张</button> <button id="nextBtn">下一张</button> <br><br> <img id="preview" width="400" alt="预览图"> <script src="app.js"></script> </body> </html>
二、JS读取与切换逻辑
核心思路是：用户选择文件后，把FileList存起来，用FileReader把当前索引对应的文件读成DataURL，赋给img的src。切换时改变索引并重新读取。
// 获取页面元素
var fileInput = document.getElementById('fileInput');
var preview = document.getElementById('preview');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
// 保存文件和当前索引
var fileList = [];
var currentIndex = 0;
// 当选择文件时触发
fileInput.addEventListener('change', function() {
fileList = this.files;
if (fileList.length > 0) {
currentIndex = 0;
showImage(currentIndex);
}
});
// 用FileReader显示某张图片
function showImage(index) {
var file = fileList[index];
if (!file) return;
var reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
};
reader.readAsDataURL(file);
}
// 上一张
prevBtn.addEventListener('click', function() {
if (fileList.length === 0) return;
currentIndex = (currentIndex - 1 + fileList.length) % fileList.length;
showImage(currentIndex);
});
// 下一张
nextBtn.addEventListener('click', function() {
if (fileList.length === 0) return;
currentIndex = (currentIndex + 1) % fileList.length;
showImage(currentIndex);
});
关键点说明
- input标签的
multiple属性允许用户一次选多张相册图片。 - FileReader的
readAsDataURL方法会把图片转成base64编码，直接用于img显示。 - 切换时用取模运算实现循环浏览，不会越界。
三、注意事项
由于浏览器安全限制，FileReader只能读取用户主动选择的文件，不能访问任意本地路径。如果需要在移动端使用，注意部分旧系统对multiple支持不完整，可做降级处理。
使用FileReader预览本地图片，既保护用户隐私，也减少了服务器压力，是前端处理相册切换的实用方案。
HTML5FileReaderJS本地相册图片切换修改时间：2026-07-25 13:21:18