的一个列表项中（从 file.name 和 file.size 获取这些信息）。定制的 returnFileSize() 函数返回一个用 bytes/KB/MB 表示的可读性良好的文件大小（默认情况下，浏览器以绝对字节数报告大小）。

通过调用 URL.createObjectURL(curFiles[i]) 来生成图片的一张缩略预览图。然后，通过创建一个新的 来将这张图片也插入到列表项，并且将它的 src 设置为缩略图。

如果文件类型无效，则在列表项中显示一条消息，告诉用户需要选择一个其他的文件类型。

jsfunction updateImageDisplay() {

while (preview.firstChild) {

preview.removeChild(preview.firstChild);

}

const curFiles = input.files;

if (curFiles.length === 0) {

const para = document.createElement("p");

para.textContent = "No files currently selected for upload";

preview.appendChild(para);

} else {

const list = document.createElement("ol");

preview.appendChild(list);

for (const file of curFiles) {

const listItem = document.createElement("li");

const para = document.createElement("p");

if (validFileType(file)) {

para.textContent = `File name ${file.name}, file size ${returnFileSize(

file.size,

)}.`;

const image = document.createElement("img");

image.src = URL.createObjectURL(file);

listItem.appendChild(image);

listItem.appendChild(para);

} else {

para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;

listItem.appendChild(para);

}

list.appendChild(listItem);

}

}

}

定制的 validFileType() 函数接受一个 File 对象作为参数，然后使用 Array.prototype.includes() 检查 fileTypes 中是否有值和文件的 type 属性匹配。如果找到匹配项，函数返回 true。如果没找到，返回 false。

js// https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types

const fileTypes = [

"image/apng",

"image/bmp",

"image/gif",

"image/jpeg",

"image/pjpeg",

"image/png",

"image/svg+xml",

"image/tiff",

"image/webp",

"image/x-icon",

];

function validFileType(file) {

return fileTypes.includes(file.type);

}

returnFileSize() 函数接受一个数字（字节数，取自当前文件的 size 属性）作为参数，并且将其转化为用 bytes/KB/MB 表示的可读性良好的文件大小。

jsfunction returnFileSize(number) {

if (number < 1024) {

return `${number} bytes`;

} else if (number >= 1024 && number < 1048576) {

return `${(number / 1024).toFixed(1)} KB`;

} else if (number >= 1048576) {

return `${(number / 1048576).toFixed(1)} MB`;

}

}

这个例子是这样的；演示一下：