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