JQuery驗證圖片上傳文件類型

我有一個驗證上傳頭像圖片的JQuery腳本，但我需要它來防止上傳任何東西而非PNG，JPG & GIF圖片。任何方式實現這個代碼我有？下面是代碼：JQuery驗證圖片上傳文件類型

$('#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; 
});

來源

2014-01-06 user3129227

是不是有辦法檢查擴展名的文件名？就像'if（avatar.name includes jpg）{}'有點類似的事情？ – user3129227

像這樣的東西可以很容易地操縱，並創建了很多未解決的邊緣情況，如果使用像我看到的那樣的臨時方法完成的話 - 在服務器端乾淨地使用它，或者如果專注於可靠性使用正確的HTML5。 – Rohan

當然你可以在沒有File API的客戶端進行驗證，查看我的答案。 – Hugeen

這應該檢查的文件擴展名

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; 
});

來源

2014-01-06 12:51:28 Original10

如果OP準備假設用戶將始終保存文件的擴展名，這是一個很好的解決方案... – kmoe

是的，你仍然需要檢查MIME類型和數據服務器端 – Original10

Thanks @ Original10 - 這將工作顯示一個錯誤，但它也顯示有效文件的錯誤 - 任何想法爲什麼？ – user3129227

你可以嘗試JQuery驗證爲驗證其爲具有接受：

vCategoryImage:{ 
    accept: "image/*" 
}

來源

2014-01-06 12:55:46 Nish

閱讀這是你想要的？（http://jqueryvalidation.org/accept-method/） – Nish

JQuery驗證圖片上傳文件類型

回答

相關問題