Javascript 文件字段的jQuery验证插件未按预期工作_Javascript_Jquery_Jquery Validate

Javascript 文件字段的jQuery验证插件未按预期工作

javascript jquery

Javascript 文件字段的jQuery验证插件未按预期工作,javascript,jquery,jquery-validate,Javascript,Jquery,Jquery Validate,我试图通过使用accept方法，使用jQuery验证插件限制用户可以上传的文件类型它在插件示例页面中起作用，但对我来说不起作用检查此页面：当显示“接受：”text/plain“时，选择文件窗口仅显示文件夹中的文本文件。这是件好事当我这样做的时候（稍微不同），我失败了。我可以看到文件夹中的所有文件。我该怎么做才对 <!DOCTYPE html> <html lang="en" dir="ltr" class="client-js"> <head> <

我试图通过使用

accept

方法，使用jQuery验证插件限制用户可以上传的文件类型

它在插件示例页面中起作用，但对我来说不起作用

检查此页面：当显示“接受：”text/plain“时，选择文件窗口仅显示文件夹中的文本文件。这是件好事

当我这样做的时候（稍微不同），我失败了。我可以看到文件夹中的所有文件。我该怎么做才对

<!DOCTYPE html>
<html lang="en" dir="ltr" class="client-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>I'm stuck</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
</head>
<body>

<form id="imageForm" enctype="multipart/form-data" method="post">
    <input type="file" name="itemImage" class="itemImage">
    <label for="itemImage" generated="true" class="error itemImage"></label>
    <input type="submit" value="Upload Image" class="imageForm" id="submitbutton">
</form>
</body>
</html>

$("#imageForm").validate({
    rules: {
        itemImage: {
            required: true,
                accept: "text/plain"
        },
    },
    messages: {
        itemImage: {
            required: "Please select a text file",
            accept: "Only text files"
        },
    },
    submitHandler: function() {


我卡住了
$（“#imageForm”）。验证({
规则：{
项目图像：{
要求：正确，
接受：“文本/普通”
},
},
信息：{
项目图像：{
必需：“请选择一个文本文件”，
接受：“仅文本文件”
},
},
submitHandler:function（）{

使用

#imageForm

而不是

#image

并将您的

代码

包含在

脚本标记中
<script>
    $(function(){
        $("#imageForm").validate({
            rules: {
                itemImage: {
                    required: true,
                    accept: "text/plain"
                },
            },
            messages: {
                itemImage: {
                    required: "Please select a text file",
                    accept: "Only text files"
                },
            },
        });
    });
</script>


$（函数（）{
$（“#imageForm”）。验证({
规则：{
项目图像：{
要求：正确，
接受：“文本/普通”
},
},
信息：{
项目图像：{
必需：“请选择一个文本文件”，
接受：“仅文本文件”
},
},
});
});

引用OP：
“我试图通过使用accept方法使用jQuery验证插件限制用户可以上载的文件类型。”
您不能，因为这不是jQuery验证插件的功能。验证插件仅在选择文件后给出验证错误消息。它不会过滤文件浏览器窗口的内容。毕竟，如果确实如此，您将永远不会看到验证错误，也不需要设置错误消息
我认为您混淆了验证插件的HTML5accept
属性和accept
规则/方法。它们不是一回事。只有Internet浏览器能够处理HTML5accept
属性，才会在文件浏览器窗口中过滤文件类型
供您参考：

在演示中，当他指定“text/plain”时，出错的是，您只能在“选择文件”窗口中看到.txt文件。这是我在这里试图实现的，但它不起作用。在您的演示中也是一样。用户可以看到所有的文件。@Norman，您的期望被打破了，而不是演示。验证插件只会在选择错误类型的文件时给您一条验证错误消息，仅此而已…它不能在文件浏览器窗口中过滤文件。@Sparky它在文件浏览器窗口中过滤文件。它在Chrome中工作，但在Mozilla中不工作。试试我发布的链接。@Norman，你把HTML5accept
属性与验证插件的accept
规则/方法混淆了。它们不是一回事。Th只有当浏览器能够处理HTML5accept
属性时，才会进行过滤。请参阅：