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

Question

说明：

我正在使用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; 
                    }
                });

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..."+"\\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>