[英]Check filesize and filetype in Jquery before uploading image via ajax method
我正在使用jquery.form.js
插件將文件上傳到服務器。 我正在使用這個插件。
但是,我無法設置任何文件大小限制和文件類型限制。 我已啟用PHP腳本,但是在文件開始上傳到服務器時有效(這是服務器端說明)。 我希望在客戶端進行限制,以便在文件大小和文件類型不匹配時,它將禁用表單提交按鈕。
$('#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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.