使用jQuery裁剪图像之前进行文件类型验证

Question

我有使用jropropie插件的裁剪图像代码，并使用bootstrap modal上传。 就我而言，我使用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.log('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);
                     /*
                    }
                    */
                }
            });
        })
    });

});

现在，我需要检查文件类型验证并在加载模式框之前显示警报。 如何显示警报消息？

Answer 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.log('jQuery bind complete'); }); } reader.readAsDataURL(file); $('#uploadimageModal').modal('show'); } else { alert('File not supported'); } });