本文共 1553 字，大约阅读时间需要 5 分钟。

为了实现文件的上传功能，并处理多个文件的上传，我们需要使用 HTML 和 JavaScript 的组合技术。以下是优化后的详细说明：

HTML 结构如下：

   
    
    点击选择图片    
    
   
   

JavaScript 代码如下：

window.onload = function() {    var input = document.getElementById("uploadfile");    var imgBox = document.getElementById("img-box");    var fileList; // 用于存储用户选择的所有文件    // 当用户选择或删除文件时，触发事件    input.addEventListener("change", readFiles);    // 处理图片并添加到 DOM 中    function readFiles() {        fileList = input.files; // 获取所有选中文件        // 遍历所有选中的文件        for (var i = 0; i < fileList.length; i++) {            var file = fileList[i];            var reader = new FileReader();            // 更改文件读取成功后的处理函数            reader.onload = function(e) {                var img = document.createElement('img'); // 创建新的 img 标签                img.src = e.target.result; // 设置图片的来源                imgBox.appendChild(img); // 将图片添加到 img-box 中            };            if (file_type correspond to image) {                reader.readAsDataURL(file); // 如果是图片文件，使用DataURL格式读取            } else {                alert("请仅上传图片文件");            }        }    }};

代码功能解析：

文件属性解析：

• lastModified：返回文件的最后一次修改时间。
• name：文件名。
• size：文件大小（字节）。
• type：文件 MIME 类型。

需要注意的事项：

• 仅限图片文件上传，推荐使用 readAsDataURL 方法来处理图片文件。
• 确保图片文件不超过信息安全威胁限制。
• 如需进一步限制文件类型，可在读取前检查文件 MIMEType。