使用jQuery插件驗證圖像尺寸

我有一個表單，其中驗證發生在jQuery的驗證插件中。我的表單包含兩個元素，一個輸入類型=文件和一個提交按鈕。用戶將選擇一個圖像，如果該圖像小於500px，則不會被接受，並且應該顯示錯誤消息。我已經爲這個被稱爲寬度的方法做了一個新的方法，但由於某種原因它不起作用。當我嘗試提交小於500像素的圖片時，錯誤消息未顯示。這是我的jsfiddle。使用jQuery插件驗證圖像尺寸

HTML

<form class="some_form" enctype="multipart/form-data" method="post" action=""> 
    <input type="file" name="photo" id="photoInput" /> 
    <input type="submit"> 
</form>

jQuery的

$.validator.addMethod('width', function(value, element) { 
    if ($(element).data('width')) { 
    return $(element).data('width') >= 500; 
    } 

    return true; 
}, 'Image needs to be wider than 500px'); 

$(".some_form").validate({ 
    rules: { 
    photo: { 
     required: true, 
     width: 500 
    } 

    }, 

    messages: { 
    photo: { 
     required: "You must insert an image", 
     width: "Your image's width must be greater than 500px" 
    }, 
    } 

});

來源

2016-07-16 user2896120

圖像寬度本身並不奇蹟般地出現在元素數據中。您需要首先自己處理圖像文件 – charlietfl

@charlietfl我該怎麼做？ – user2896120

需要使用'FileReader' API – charlietfl

您可以加載鏡像文件到<img>元素，然後獲得該元素的寬度。

加上一個容器元素到您的HTML持有<img>元素：

<form class="some_form" enctype="multipart/form-data" method="post" action=""> 
    <input type="file" name="photo" id="photoInput" /> 
    <input type="submit"> 
</form> 
<div id="imgContainer"></div>

接下來，定義自定義驗證方法：

$.validator.addMethod('minImageWidth', function(value, element, minWidth) { 
    return ($(element).data('imageWidth') || 0) > minWidth; 
}, function(minWidth, element) { 
    var imageWidth = $(element).data('imageWidth'); 
    return (imageWidth) 
     ? ("Your image's width must be greater than " + minWidth + "px") 
     : "Selected file is not an image."; 
});

注：

如您所見，該方法預計可以通過在文件輸入元素上調用.data('imageWidth')來獲取圖像寬度。我們將在下面顯示的代碼中設置該值。
另外，該方法假設當.data('imageWidth')返回undefined時，所選文件不是圖像。

現在，您可以使用minImageWidth方法是這樣的：

var validator = $('.some_form').validate({ 
    rules: { 
    photo: { 
     required: true, 
     minImageWidth: 500 
    } 
    }, 
    messages: { 
    photo: { 
     required: "You must insert an image" 
    }, 
    } 
});

最後，添加一個變化事件處理程序創建的<img>元素，並將其添加到文件輸入集裝箱。它還會在文件輸入元素上設置.data('imageWidth')值。

var $submitBtn = $('.some_form').find('input:submit'), 
    $photoInput = $('#photoInput'), 
    $imgContainer = $('#imgContainer'); 

$('#photoInput').change(function() { 
    $photoInput.removeData('imageWidth'); 
    $imgContainer.hide().empty(); 

    var file = this.files[0]; 

    if (file.type.match(/image\/.*/)) { 
    $submitBtn.attr('disabled', true); 

    var reader = new FileReader(); 

    reader.onload = function() { 
     var $img = $('<img />').attr({ src: reader.result }); 

     $img.on('load', function() { 
     $imgContainer.append($img).show(); 
     var imageWidth = $img.width(); 
     $photoInput.data('imageWidth', imageWidth); 
     if (imageWidth < 500) { 
      $imgContainer.hide(); 
     } else { 
      $img.css({ width: '400px', height: '200px' }); 
     } 
     $submitBtn.attr('disabled', false); 

     validator.element($photoInput); 
     }); 
    } 

    reader.readAsDataURL(file); 
    } else { 
    validator.element($photoInput); 
    } 
});

注：

當圖像被加載時，它的寬度被置於作爲文件輸入元件上的.data('imageWidth')值。
圖像加載時，提交按鈕被禁用，用戶無法提交表單。
圖像加載後立即執行驗證。也就是說，用戶不必點擊提交按鈕以顯示錯誤消息。這是通過致電validator.element()完成的。
在添加到DOM之前，您無法獲取<img>元素的寬度。它也必須是可見的，但上面的代碼顯示瞭如何在需要之後立即隱藏它。

jsfiddle

參考文獻：

來源

2016-07-16 07:18:09

很好的答案！非常感謝！ – user2896120

@ user2896120 - 我對我的回答做了一些改進：（1）如果所選文件不是圖像，它現在顯示不同的錯誤消息，（2）現在在選擇文件後立即執行驗證。 –

看起來很棒，效果也很棒！如果我要添加高度驗證，是否需要添加另一個addMethod（）？ – user2896120

使用jQuery插件驗證圖像尺寸

回答

相關問題