[英]Parsley image dimensions validation
我有一個文件輸入字段,我想為其驗證最小圖像尺寸(除其他事項外)。 我將Parsley用作前端驗證庫,因此嘗試添加自定義驗證器來執行此操作。
這是我的自定義驗證程序代碼:
window.Parsley.addValidator('imagemindimensions', {
requirementType: 'string',
validateString: function (value, requirement, parsleyInstance) {
let file = parsleyInstance.$element[0].files[0];
let [width, height] = requirement.split('x');
let image = new Image();
image.src = window.URL.createObjectURL(file);
image.onload = function() {
return image.width >= width && image.height >= height;
};
},
messages: {
en: 'Image dimensions have to be at least %s px'
}
});
我的HTML:
<input type="file"
name="upload-photo"
accept="image/*"
class="js-photo-upload"
data-parsley-validate
data-parsley-trigger="change"
data-parsley-imagemindimensions="300x300">
JS代碼來處理文件輸入更改:
$(document).on('change', '.js-photo-upload', function() {
if ($(this).parsley().isValid()) {
// process image
}
});
現在,運行驗證器時,它始終會通過。 我懷疑這是因為Parsley無法處理image.onload
的異步代碼塊。 關於如何在Parsley lib中解決此問題的任何想法?
到目前為止,我找到的解決方案是:
validateString
需要返回一個Promise
。 onload
應該完全填充或拒絕它,而不是返回true/false
根據Marc-André的回答,我更新了驗證器:
window.Parsley.addValidator('imagemindimensions', {
requirementType: 'string',
validateString: function (value, requirement, parsleyInstance) {
let file = parsleyInstance.$element[0].files[0];
let [width, height] = requirement.split('x');
let image = new Image();
let deferred = $.Deferred();
image.src = window.URL.createObjectURL(file);
image.onload = function() {
if (image.width >= width && image.height >= height) {
deferred.resolve();
}
else {
deferred.reject();
}
};
return deferred.promise();
},
messages: {
en: 'Image dimensions have to be at least %spx'
}
});
然后,我通過以下方式調整了文件輸入事件偵聽器:
$(document).on('change', '.js-photo-upload', function() {
$(this).parsley().whenValid({}).done(function () {
// process image
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.