JavaScript文件扩展名验证失效问题排查与修复求助

存在的错误点： #

• 箭头函数的this指向错误：input的change事件使用箭头函数，this不指向input元素，导致this.files无法获取到选中的文件，应替换为e.target.files。
• 拼写错误：showFiles函数中判断条件的files.lenght是拼写错误，正确写法为files.length。这个错误会导致逻辑判断完全失效，无论传入的是单个文件还是文件列表，都会执行错误的分支，进而引发后续文件类型判断错误。
• （可选）文件类型兼容性问题：部分环境中文件的type属性可能为空，仅依赖file.type判断会出现误判，可补充通过文件名后缀校验。

修复后的完整代码： #

const dropArea = document.querySelector(".drop-area");
const dragText = dropArea.querySelector('h2');
const button = dropArea.querySelector("button");
const input = dropArea.querySelector("#input-file");
let files;

button.addEventListener("click", (e) => {
    input.click();
});

input.addEventListener("change", (e) => {
    // 修复this指向问题，改用e.target获取input元素
    files = e.target.files;
    dropArea.classList.add("active");
    showFiles(files);
    dropArea.classList.remove("active");
});

dropArea.addEventListener("dragover", (e) => {
    e.preventDefault();
    dropArea.classList.add("active");
    dragText.textContent = "Suelta para subir los archivos";
});

dropArea.addEventListener("dragleave", (e) => {
    e.preventDefault();
    dropArea.classList.remove("active");
    dragText.textContent = "Arrastra y suelta archivos";
});

dropArea.addEventListener("drop", (e) => {
    e.preventDefault();
    files = e.dataTransfer.files;
    showFiles(files);
    dropArea.classList.remove("active");
    dragText.textContent = "Arrastra y suelta archivos";
});

function showFiles(files) {
    // 修复length拼写错误
    if (files.length === undefined) {
        processFile(files);
    } else {
        for (const file of files) {
            processFile(file);
        }
    }
}

function processFile(file) {
    const docType = file.type;
    const validExtensions = ["image/jpeg", "image/jpg", "image/png", "image/gif"];
    // 可选：增加文件名后缀校验，兼容type为空的情况
    const validSuffixes = [".jpg", ".jpeg", ".png", ".gif"];
    const fileName = file.name.toLowerCase();
    const hasValidSuffix = validSuffixes.some(suffix => fileName.endsWith(suffix));

    if (validExtensions.includes(docType) || hasValidSuffix) {
        // 处理有效文件的逻辑
        console.log("Archivo valido:", file);
    } else {
        alert('No es un archivo valido');
    }
}

内容的提问来源于stack exchange，提问作者Kilex79