Проверка типа файла перед кадрированием изображения с помощью jQuery

У меня есть этот код для обрезки изображения с использованием плагина jquery croppie и загрузки с использованием модального режима начальной загрузки. в моем случае я работаю с FileReader

$(document).ready(function(){

    $image_crop = $('#image_demo').croppie({
        enableExif: true,
        viewport: {
            width:200,
            height:300,
            type:'square' //circle
        },
        boundary:{
            width:300,
            height:300
        }
    });
    var fileTypes = ['jpg', 'jpeg', 'png'];
    $('#upload_image').on('change', function(){
        var reader = new FileReader();
        reader.onload = function (event) {
            $image_crop.croppie('bind', {
                url: event.target.result
            }).then(function(){
                console.info('jQuery bind complete');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal').modal('show');
    });

    $('.crop_image').click(function(event){
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response){
            $.ajax({
                url:"../account/edit/profileimage",
                type: "POST",
                //dataType:"json",
                data:{"image": response},
                success:function(data)
                {
                    /*
                    if (response.status === 'error'){
                        $('#uploadimageModal').animate({ scrollTop: $('#uploaderror').offset().top }, 500);
                        $('#uploaderror').html(response.message);
                    }
                    else {
                    */
                        $('#uploadimageModal').modal('hide');
                        $('#uploaded_image').html(data);
                     /*
                    }
                    */
                }
            });
        })
    });

});

Теперь в действии мне нужно проверить проверку типа файла и показать предупреждение перед загрузкой модального окна. как я могу показать предупреждающее сообщение ?!

Проверьте тип MIME файла, а не расширение файла: stackoverflow.com/questions/18299806/…

Rory McCrossan 14.11.2018 12:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
932
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Взгляните на приведенный ниже код. Надеюсь, поможет

var fileTypes = ['jpg', 'jpeg', 'png'];
$('#upload_image').on('change', function() {
  var reader = new FileReader();
  var file = this.files[0]; // Get your file here
  var fileExt = file.type.split('/')[1]; // Get the file extension

  if (fileTypes.indexOf(fileExt) !== -1) {
    reader.onload = function(event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function() {
        console.info('jQuery bind complete');
      });
    }
    reader.readAsDataURL(file);
    $('#uploadimageModal').modal('show');
  } else {
    alert('File not supported');
  }
});

Другие вопросы по теме