簡體   English   中英

歐芹圖像尺寸驗證

[英]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中解決此問題的任何想法?

到目前為止,我找到的解決方案是:

  • 使用自定義的遠程驗證器並由后端負責。 但這會導致很小的延遲,並且會首先在客戶端執行一些操作,從而對服務器造成沖擊。
  • 檢查更改事件偵聽器上我的文件輸入中的尺寸,並使用addError方法手動添加Parsley錯誤。 但這有點駭人聽聞,並且要求我在下次驗證該字段時手動刪除該錯誤。

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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM