событие ввода [type = "file"] не работает в устройстве android chrome - PullRequest
Новая
       28

событие ввода [type = "file"] не работает в устройстве android chrome

0 голосов
/ 17 февраля 2020

Мое событие ввода [type = "file"] не получает триггера, когда я снимаю изображение с камеры телефона и выбираю его. Но это вызывает срабатывание, когда я снова пытаюсь загрузить iamge.

Это работает с другим устройством и другим браузером, но не работает с браузером android chrome. Я использую код ниже.

Я использую jQuery v3.4.0 и jQuery Плагин проверки 1.9.0 

<div class="row photo-lab license-photo-lab align-items-center justify-content-center">
    <div class="col-md-12 col-sm-12">
        <div class="photo-edit license-photo-edit">
            <div class="select-photo rounded-5 mb-3">
                <img class="img-fluid center" src="assets/images/front-profile.svg" blank-src="assets/images/front-profile.svg" alt="Center Photo" style="transform: rotate(0deg); transform-origin: 50% 50% 0px;">
            </div>
            <div class="choose-file-btn">
                <span class="btn add-photo-btn btn-blue-outline font-weight-bold text-capitalize form-check-wrapper">
                    Add Photo <input name="fProfile" type="file" class="file error" skip-required="false">
                    <input type="hidden" name="fileChanged" value="true" class="valid">
                    <input type="hidden" name="fProfile_rotation" class="rotationVal valid" value="0">
                </span><label for="fProfile" generated="true" class="error" style="">This field is required</label>
            </div>
        </div>
    </div>
</div>



 $.validator.addMethod("filetype", function(value, element) {
    var fileInput = $(element);
    var targetImg = fileInput.closest('.photo-edit').find('img');
    var isValid = true;
    if(value!='') {
        var filePath = value;
        var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
        if (!allowedExtensions.exec(filePath)) {
            //alert('Please upload file having extensions .jpeg,.jpg,.png only.');
            fileInput.val('');
            fileInput.closest('.photo-edit').find('input[name="fileChanged"]').val('false');
            fileInput.val('') ? label.hide() : label.show();
            isValid = false;
        } else {
            // Image preview
            if (event.target.files && event.target.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    targetImg.attr('src', e.target.result);
                };
                reader.readAsDataURL(event.target.files[0]);
            }
            fileInput.closest('.photo-edit').find('input[name="fileChanged"]').val('true');
        }
    }
    if(!isValid){
        targetImg.attr('src', targetImg.attr('blank-src'));
    }
    return isValid;
},"Please select profile pic.");

 $("#personal_form").validate({
    ignore: ".is-step-skip input",
    rules: {
        fProfile: {
            filerequire: true,
            filetype: true,
        },
    }
});
...