Question

在我的页面上，我有一堆文件上传字段（全部都带有name="files[]"，因此它可以作为PHP数组处理。）

它们都位于两个div之一，我们称之为'div1'和'div2'。

如何使用javascript以便onSubmit，它会检查文件类型，div1中的所有文件只能是'pdf'，而div2'中的所有文件只能是'pdf'或'doc'？

一个简单的警告弹出框即可（即“文件只能是pdf”）

有什么建议吗？

**************** UPDATE *******************

提出了一个更相关的问题：Add a filetype validation to phpmailer?

Answer 1

文件上传元素在浏览器中受到严格保护，JS对其内容的访问权限最小。处理文件本身的任何事情都被锁定，因为系统中的任何漏洞都可能允许恶意站点从用户的计算机窃取文件。

最简单的解决方法是在字段旁边放一个小注释，说“仅限PDF”！然后使用服务器端脚本确认它是pdf。

Answer 2

你可以这样做：

<强> HTML：

<form method="post" enctype="multipart/form-data" name="form">

<input type="file" name="file" /><br />
<input type="file" name="file" />
<input type="submit" />
</form>

<强> JavaScript的：

   var fileInput = document.getElementsByName("file");
   for(var i = 0, len = fileInput.length; i < len; i++) {
    fileInput[i].addEventListener('change', 
        function(e) {
            if(this.files[0].name.match(/\.pdf$/) == null) {
                alert('Files can only be PDF.');
                return;
            }
        },
        false
    );
 }

Answer 3

您可以解决表单元素并阅读name属性，然后获取文件名并可以使用文件扩展名。

但这可能仅用于使用户更容易 - 因此您可以在上传过程之前检测错误的文件类型。

它绝不是一种保护。

您还可以将期望的文件类型传递给对话框本身。大多数文件管理器和浏览器都尊重它并仅显示您要选择的类型的文件，但用户可以单击下拉列表并选择“查看所有文件”并拍摄他/她想要的任何文件。

这是通过accept attribute完成的。

如果您想帮助用户选择正确的文件，上述两种方法都是合适的，我甚至可以一起使用它们。

如果要保护服务免受错误的文件类型的影响，则必须评估文件服务器端。文件扩展名检查不合适，有php functions可用于确定文件的真实mimetype。

Answer 4

您可以使用以下代码检查每个文件上传的提交：

var parts = document.getElementById('myFileField').value.split('.');
if (parts[parts.length-1] != 'pdf') {
    alert('Invalid extension. Needs to be PDF.');
}

通过The Mask合并作品，

var fileInputs = document.getElementsByName("files[]");
for (var ele in fileInputs) {
    if (ele.parentNode.id = 'div1') {
        var parts = ele.value.split('.');
        if (parts[parts.length-1] != 'pdf') {
            alert('Invalid extension: "' + ele.value + '". Needs to be PDF.');
        }
    }
    else if (ele.parentNode.id = 'div2') {
        var parts = ele.value.split('.');
        if (parts[parts.length-1] != 'pdf' && parts[parts.length-1] != 'doc') {
            alert('Invalid extension: "' + ele.value + '". Needs to be PDF or DOC.');
        }
    }
}

onSubmit检查文件上传类型？

4 个答案: