在通过ajax方法上传图像之前，检查Jquery中的文件大小和文件类型

Question

The description:

I am using the jquery.form.js plugin to upload file to the server. I am using this plugin.

However, I am unable to set any filesize restriction and filetype restriction. I have PHP script enabled, but that works when file is started uploading to the server(it's a server side scription). I want a restriction in the client side so that it will disable the form submit button when the filesize and filetype doesn't match.

The jquery code:

$('#validatefrm').submit(function(e) {
                    $("#desc").val($('.Editor-editor').html()); 
                    if($('#image').val()) 
                    {
                        e.preventDefault();
                        $('#loader-icon').show();
                        $(this).ajaxSubmit({ 
                            target:   '#targetLayer', 
                            dataType: 'json',
                            beforeSubmit: function() {
                              $("#progress-bar").width('0%');
                            },
                            uploadProgress: function (event, position, total, percentComplete){ 
                                $("#progress-bar").width(percentComplete + '%');
                                $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
                            },
                            success:function (data){
                                var htmlMSG = '<b><span ';
                                if(data.type == 1)
                                {
                                    htmlMSG += 'class="success-span"';
                                }
                                else
                                {
                                    htmlMSG += 'class="fail-span"';
                                }
                                htmlMSG += ' >'+data.msg+'</span></b>';
                                $('.message-section').html('');
                                $('.message-section').append(htmlMSG);
                                $('#loader-icon').hide();
                                $('#myModal').modal('show'); 

                                /*var delay = 3000; //Your delay in milliseconds
                                var redirect = '<?php echo base_url();?>admin/post/edit_post/'+data.post_id;
                                setTimeout(function(){ window.location = redirect; }, delay);*/
                            },
                            resetForm: false
                        }); 
                        return false; 
                    }
                });

Answer 1

$(document).ready(function() {
  
  $('#registerUserBtn').click(function() {
      if ($('#new_user_registration_form').smkValidate()) {
          if( $.smkEqualPass('#pass1', '#pass2') ){
              $('#new_user_registration_form')[0].submit();
            }
      }
    });
  
function readURL(input) {
        if (input.files && input.files[0]) {
            var file = input.files[0];
            var sizeKB = file.size / 1024;
            /*
                        0 < length <=      255  -->  `TINYBLOB`
                      255 < length <=    65535  -->  `BLOB`
                    65535 < length <= 16777215  -->  `MEDIUMBLOB`
                 16777215 < length <=    2³¹-1  -->  `LONGBLOB`
            */
            
            var ext = $('#user_img').val().split('.').pop().toLowerCase();
            if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
                alert('invalid extension!Allowed types  [gif/png/jpg/jpeg]');
            }else if(sizeKB > 65.535){
                alert("can't be uploaded..."+"
 max upload size 65 KB");
            }else{
                 var reader = new FileReader();
                 
                 reader.onload = function (e) {
                     $('#blah').attr('src', e.target.result);
                 }
                 reader.readAsDataURL(input.files[0]);
            }
        }
    }
    
    $("#user_img").change(function(){
        readURL(this);
        $('#blah').each(function() {
            var maxWidth = 160; 
            var maxHeight = 160;
            var ratio = 0;
            var width = $(this).width();
            var height = $(this).height();
            $(this).css("width", maxWidth);
            $(this).css("height", maxHeight);
        });
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="text-center">
                            <img id="blah" name="blah" src="resources/images/user_8.png" alt="your image" class="avatar img-circle img-thumbnail" alt=""/>
                        </div>



<div class="col-md-8">
                                    <input name="user_img" type="file" class="text-center center-block well well-sm" id="user_img" />
                                </div>

<div class="col-md-8">
                                    <input class="btn btn-info" value="Save Changes" id="registerUserBtn" type="button"> <span></span> 
                                </div>

</div>