輸入文件類型的圖像大小限制不起作用

Question

實際上我嘗試使用此URL進行jquery圖像文件驗證，但是它不起作用。請您驗證一下並提出建議嗎？

---

單擊此處： https : //github.com/snyderp/jquery.validate.file

<form method="post" enctype="multipart/form-data" id="upload_form">
    <input type="file" name="example_file" name="example_file">
    <button type="submit">Upload</button>
</form>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(function () {
    $("#upload_form")
        .validate({
            rules: {
                example_file: {
                    fileType: {
                        types: ["text", "gzip", "zip"]
                    },
                maxFileSize: {
                    "unit": "KB",
                    "size": 100
                },
                minFileSize: {
                    "unit": "KB",
                    "size": "10"
                }
            }
        });
});
</script>

Answer 1

您要使用擴展名，因此僅包含jquery和jquery.validate是不夠的。 因此，也可以通過下載插件來包含該插件。 （我知道示例中缺少它）

最終解決方案應類似於：

<form method="post" enctype="multipart/form-data" id="upload_form">
    <input type="file" name="example_file" name="example_file">
    <button type="submit">Upload</button>
</form>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="jquery.validate.file.js"></script>
<script> $(function () {
    $("#upload_form")
        .validate({
            rules: {
                example_file: {
                    fileType: {
                        types: ["text", "gzip", "zip"]
                    },
                maxFileSize: {
                    "unit": "KB",
                    "size": 100
                },
                minFileSize: {
                    "unit": "KB",
                    "size": "10"
                }
            }
        });
    });
</script>

編輯：在jsfiddle中測試uploadfunction並不是最好的主意，因為它一般不允許文件上傳。

Answer 2

作為jQuery Validate插件的一部分，沒有名為fileType ， maxFileSize和minFileSize規則。 您將需要編寫自己的規則， 或者可能只是忘了包含引用的來自GitHub的自定義文件上傳規則 。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<!--// need to include this one too //-->
<script src="jquery.validate.file.js"></script>

您也缺少右括號...

$("#upload_form").validate({
    rules: {
        example_file: {
            fileType: { 
                types: ["text", "gzip", "zip"]
            },
            maxFileSize: { 
                "unit": "KB",
                "size": 100
            },
            minFileSize: { 
                "unit": "KB",
                "size": "10"
            }
        } // <- THIS one was missing
    }
});

1. 包括添加文件上傳方法的插件。
2. 修復丟失的支架。

工作演示： http ： //jsfiddle.net/h2nduLco/3/