只允许ajax上传图片[重复]

Question

我正在做一个项目，用户必须上传之前提交一个表单的图像。目前我的代码正在工作，但它选择任何格式大小，这是不需要在我的项目，所以我的目标是限制用户只选择图像文件格式定义，如jpg，jpeg和png从我希望用户只选择jpg，png和jpeg文件。

下面是我的工作代码：

$(document).on('submit', '#multi-cropper', function(e){
$('#cropModal').modal('hide');
e.preventDefault();

 $('#loadingBarModal').modal({
  backdrop: 'static',
  keyboard: false
});

$.ajax({

    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                percentComplete = percentComplete*100;
                $('.myprogress-bar').css('width', 
                Math.ceil(percentComplete)+'%');
                $('.myprogress-bar').html(Math.ceil(percentComplete)+'%');
            }
       }, false);

       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               percentComplete = percentComplete*100;

               $('.myprogress-bar').css('width', 
            Math.ceil(percentComplete)+'%');
                $('.myprogress-bar').html(Math.ceil(percentComplete)+'%');
           }
       }, false);

       return xhr;
    },

      url: '<?php echo base_url(); ?>/user/crop_image',
      data: new FormData(this),
      contentType: false,
    processData: false,
    type: 'POST',
    dataType:"json",

    success: function(data){
        $('#loadingBarModal').modal('hide');
         $('.myprogress-bar').css('width', '0%');



                    if(data.status == 1){
            $('.preview-image-'+action_image_id).attr('src', '<?php echo 
           base_url(); ?>uploads/'+data.base_name);
            $('.prev'+action_image_id).show();
            $('.preview-image-
           '+action_image_id).addClass('preview_this_image');
            $('#image-src-'+action_image_id).val(data.base_name);
            action_image_id = 0;
            //$('#delete_this'+action_image_id).show();
        }

        $.unblockUI();
        reload_div();
          }
        });
       });



function reload_div(){


    $.post('<?php echo base_url(); ?>user/get_modal', {}, function(data){
        $('.temprary-data').html(data);
    });
}
reload_div();

Answer 1

你可以在上传前检查图像的类型

var ext = $('[name="image_url"]').val().split('.').pop().toLowerCase();
                                    if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
                                        alert('invalid extension!');
                                        blah = 1;
                                        return false;
                                    } else {
                                        valid_frm = 1;
                                    }