Javascript 仅允许在ajax上上载图像

我正在做一个项目，用户在提交表单之前必须上传一张图片。目前我的代码正在运行，但它正在选择我的项目中不需要的任何格式大小，因此我的目标是限制用户仅选择定义的图像文件格式，如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();

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

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

---

它不工作。这只检查文件扩展名。该文件可能是恶意的，并且仅使用jpg扩展名保存。检查MIME类型要好得多。在我的代码中，如果我选择图像，它将首先在模态上显示，如果我不选择图像，它将显示图像alt文本。还显示上传按钮。当按钮显示alt TEXT时，是否可以隐藏按钮？我使用图像代码：它不工作。这只检查文件扩展名。该文件可能是恶意的，并且仅使用jpg扩展名保存。检查MIME类型要好得多。在我的代码中，如果我选择图像，它将首先在模态上显示，如果我不选择图像，它将显示图像alt文本。还显示上传按钮。当按钮显示alt TEXT时，是否可以隐藏该按钮？我使用图像代码：检查这个我为一个处理MIME类型检查的业余项目编写的。试着根据你的需要来实现它。检查一下我为一个爱好项目写的这个，这个项目处理MIME类型检查。根据您的需要尝试实施它。

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;
                                    }