Question

我有一个JQuery脚本验证了头像图像的上传，但我需要它来阻止上传任何以外的PNG，JPG＆amp; GIF 图片。有没有在我的代码中实现这个的方法？这是代码：

$('#addButton').click(function () {
    var avatar = $("#avatarupload").val();
    if(avatar.length < 1) {
        avatarok = 0;
    }
    //ELSE IF FILE TYPE
    else {
        avatarok = 1;
    }
    if(avatarok == 1) {
        $('.formValidation').addClass("sending");
        $("#form").submit();
    }
    else {
        $('.formValidation').addClass("validationError");
    }
    return false;
});

Answer 1

这应检查文件扩展名

var extension = avatar.split('.').pop().toUpperCase();
if (extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG"){
    avatarok = 0;
}

所以完整的代码应该是

$('#addButton').click(function () {
    var avatar = $("#avatarupload").val();
    var extension = avatar.split('.').pop().toUpperCase();
    if(avatar.length < 1) {
        avatarok = 0;
    }
    else if (extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG"){
        avatarok = 0;
        alert("invalid extension "+extension);
    }
    else {
        avatarok = 1;
    }
    if(avatarok == 1) {
        $('.formValidation').addClass("sending");
        $("#form").submit();
    }
    else {
        $('.formValidation').addClass("validationError");
    }
    return false;
});

Answer 2

您可以尝试使用jquery验证进行验证，即接受：

vCategoryImage:{
   accept: "image/*"
}

Answer 3

根据您的要求，目的是上传头像，因此您可以使用拖放区开源文件上传扩展名Drop Zone进行检查。

否则，您可以检查Jquery提供的各种插件。

示例插件，请检查以下链接

Lite Uploader-文件类型和大小验证以及更多功能。 Lite Uploader
可恢复JS-Resumable JS

希望这会有所帮助。

JQuery验证图像上载文件类型

3 个答案: