Question

我试图通过使用accept方法使用jQuery验证插件来限制用户可以上传的文件类型。

它适用于插件示例页面，但不适用于我。

检查此页面：http://jquery.bassistance.de/validate/demo/file_input.html何时接受：＆＃34; text / plain＆＃34;选择文件窗口仅显示文件夹中的文本文件。这是件好事。

当我这样做时（有点不同）我失败了。我可以看到文件夹中的所有文件。我该怎么做？

<!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() {

Answer 1

使用#imageForm代替#image并将您的code括在script tag中，

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

Live Demo

Answer 2

引用OP ：

“我试图通过使用accept方法使用jQuery验证插件来限制用户可以上传的文件类型。”

你不能，因为这不是jQuery Validation插件的功能。在选择文件后，Validation插件只会提供验证错误消息。它不会过滤文件浏览器窗口的内容。毕竟，如果确实如此，您将永远不会看到验证错误，也不需要设置错误消息。

我认为您将HTML5 accept属性与验证插件的accept规则/方法混淆。它们不是同一件事。仅当Internet浏览器可以处理HTML5 accept属性时，才会在文件浏览器窗口中过滤文件类型。

供参考：

http://www.wufoo.com/html5/attributes/07-accept.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#File_inputs

用于文件字段的jQuery Validation插件未按预期工作

2 个答案: