使用 Javascript 或 Jquery 在 HTML 中进行文件验证答案

【问题标题】：File validation in HTML using Javascript or Jquery使用 Javascript 或 Jquery 在 HTML 中进行文件验证
【发布时间】：2015-06-04 14:23:10
【问题描述】：

我有只接受 pdf 文件的文件控制。我想验证只接受 pdf 文件的文件，以及是否选择了另一个文件，而不是在 div 标签中重新创建具有相同名称和相同 ID 的文件控件。

验证必须是 javascript 或 jquery。

 ...
 <div>
        <input type="file" name="file" id="file1" />
 </div>
 ...

【问题讨论】：

我尝试使用 javascript 验证文件但无法做到。
您可以为此使用 jqueryvalidate 插件。之前用过，很简单。 jqueryvalidation.org

标签： javascript jquery html

【解决方案1】：

试试这个。

<input name="file" type="file" accept="application/pdf" />

【讨论】：

根据您的建议...您可以在文件对话框打开时更改文件类型
我认为没有办法在客户端进行验证。您只能通过扩展程序进行检查。

【解决方案2】：

试试这个：

$("#file1").change(function() {

    var val = $(this).val();

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'pdf':
            alert("Correct type");
            //your code
            break;
        default:
            // error message here
            alert("not a PDF file");
            //yourcode
            break;
    }
});

【讨论】：

这个只检查扩展名而不是文件类型
@rikpg 检查扩展是更好的解决方案验证。在 Jquery 中没有其他方法可以检查文件类型。
OP 可以使用 File API 在客户端做一些事情，看看这个：html5rocks.com/en/tutorials/file/dndfiles
您的文件验证是正确的..但是当我选择除pdf之外的文件时..然后文件控件不会在div中创建。
@AmitMaru 如果您选择除 pdf 以外的文件，则not a PDF file 警报。这里你必须编写新文件控件的代码，它不会自动创建。