仅允许 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;
                                    }