接前面
我们只需要修改部分代码即可实现。
这里我们给原来的input控件增加一个multiple属性：
<input type="file" id="file-input" multiple />
我需要提醒一下：
fileInput.addEventListener('change', function() {}); 中的函数实际上具有一个默认的 event 参数。
即你就像以上这么写，它还是相当于
fileInput.addEventListener('change', function(event) {
// 事件处理程序
});
那么，我们可以再简写一下：
fileInput.addEventListener("change", (event) => {
// 事件处理程序
});
这种写法可以更简洁地定义函数，并且在定义时会绑定 this 到当前的执行上下文中。在这个例子中，箭头函数的 this 将指向 fileInput 元素，而不是全局对象。
而上一个方法：
这种写法使用了一个普通函数来定义事件处理程序，它的 this 将在运行时动态绑定。在这个例子中，this 将指向 fileInput 元素，因为它是事件的目标元素。
然后我们遍历文件：
// 遍历选择的所有文件
for (const file of event.target.files) {
const reader = new FileReader();
}
注意这里的event.target.files在一定情况下可以写成this.files。（但我不建议）
为了使得程序准确，建议你还是老实写event。
我们学另外一个等价的onload的方法：
reader.addEventListener("load", (event) => {
});
它和以下代码是等价的：
reader.onload = function() {
}
reader.onload 和 reader.addEventListener("load", function(event) {}) 都是用于监听 FileReader 对象读取操作完成的事件。它们的作用是相同的，但是它们的语法略有不同。
reader.onload 是将函数作为属性分配给 FileReader 对象的传统方式。当 FileReader 对象完成读取操作时，它将自动调用该函数。
reader.addEventListener("load", function(event) {}) 利用了 EventTarget 接口定义的标准事件处理程序的语法。
用监听器实现的：
fileInput.addEventListener('change', (event) => {
// 遍历选择的所有文件
for (const file of event.target.files) {
console.log(event);
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.addEventListener("load", (event) => {
// 创建一个新的 img 元素，显示图片
const img = document.createElement("img");
img.src = event.target.result;
img.style.maxWidth = "100%";
img.style.maxHeight = "100%";
//imageContainer.innerHTML = '';
imageContainer.appendChild(img);
});
// 读取文件，转换为 Data URL 格式的字符串
reader.readAsDataURL(file);
} else {
imageContainer.innerHTML = '请选择图片文件';
}
}
});
等价写法：
fileInput.addEventListener('change', function() {
// 遍历选择的所有文件
for (const file of fileInput.files) {
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload= function(){
// 创建一个新的 img 元素，显示图片
const img = document.createElement("img");
img.src = reader.result;
img.style.maxWidth = "100%";
img.style.maxHeight = "100%";
//imageContainer.innerHTML = '';
imageContainer.appendChild(img);
}
// 读取文件，转换为 Data URL 格式的字符串
reader.readAsDataURL(file);
} else {
imageContainer.innerHTML = '请选择图片文件';
}
}
});
完整HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成 GIF 图片</title>
<script src="https://unpkg.com/[email protected]/dist/gif.js"></script>
</head>
<body>
<input type="file" id="file-input" multiple>
<div id="image-container"></div>
<script>
const fileInput = document.getElementById('file-input');
const imageContainer = document.getElementById('image-container');
fileInput.addEventListener('change', function() {
// 遍历选择的所有文件
for (const file of fileInput.files) {
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload= function(){
// 创建一个新的 img 元素，显示图片
const img = document.createElement("img");
img.src = reader.result;
img.style.maxWidth = "100%";
img.style.maxHeight = "100%";
imageContainer.appendChild(img);
}
// 读取文件，转换为 Data URL 格式的字符串
reader.readAsDataURL(file);
} else {
imageContainer.innerHTML = '请选择图片文件';
}
}
});
</script>
</body>
</html>