Only allow image on ajax upload

Question

I am working on a project where user have to upload an image before submitting a form. Currently my code is working but it is selecting any format size which is not required in my project so my goal is to restrict the user to select only the image file format which is define such as jpg, jpeg and png from I want user to only select the jpg, png and jpeg file.

Here is my working code:

$(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();

Check this [class](https://github.com/shubhamoy/photolia/blob/master/includes/Pics.php) I wrote for a hobby project which handles the MIME Type Checking. Try to implement it as per your need. — Shubhamoy, Nov 09 '17 at 11:28

score 0 · Accepted Answer · answered Nov 09 '17 at 11:15

0

Than you can check type of image before upload

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

answered Nov 09 '17 at 11:15

Devsi Odedra

5,244
1
23
37

Its not working. – Syed Nov 09 '17 at 11:18
This only checks the file extension. It's possible the file could be malicious, and just saved with a `jpg` extension. It's far better to check the MIME type. – Rory McCrossan Nov 09 '17 at 11:19
On my code If I select image its shows first on modal and if I don't select image so its shows image alt text. Also modal shows upload button. Can it be possible to hide the button when its shows alt text – Syed Nov 09 '17 at 11:27
I use image code this: – Syed Nov 09 '17 at 11:28

Only allow image on ajax upload

1 Answers1