在通过ajax方法上传图像之前，请检查Jquery中的文件大小和文件类型 - Check filesize and filetype in Jquery before uploading image via ajax method

Check filesize and filetype in Jquery before uploading image via ajax method

描述:

我正在使用jquery.form.js插件将文件上传到服务器。我正在使用这个插件。

但是，我无法设置任何文件大小限制和文件类型限制。我启用了PHP脚本，但当文件开始上传到服务器时(这是服务器端脚本)，它就会起作用。我想在客户端设置一个限制，这样当文件大小和文件类型不匹配时，它就会禁用表单提交按钮。

jquery代码:

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

$(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..."+"'n 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>