I have this image upload form that I check on 'change' for file type and file size.
If a file is above a certain size or if its not an image, it'll alert the user. Problem I'm having is, how do I prevent the form from being submitted when this is the case. If I were to click the upload button the file submits. Actually it should not until the file is a certain size and type.
Can you help me set this right? I've tried, but I just cannot figure out where and what to do.
<form enctype="multipart/form-data" method="">
<input type="file" name="file" class="file"><br>
<input type="submit" value="Upload File to Server">
</form>
Script (this is done using the jquery form plugin)
<script>
$(document).ready(function() {
$(':file').change(function(){
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;
if(file.name.length < 1) {
}
else if(file.size > 1000000) {
alert("File is to big");
}
else if(file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg' ) {
alert("File doesnt match png, jpg or gif");
}
else {
$(':submit').click(function(){
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
url:"upload_file.php",
type:"post",
dataType:"json",
target:"#status",
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
$("#status").html("HIIII Gais");
}
});
});
}
});
});
</script>
You can set a variable outside the two functions and set it to true if its valid.. If it's valid then send a request , otherwise prevent default..
$(document).ready(function() {
var isValid = false;
$(':file').change(function() {
isValid = false;
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;
if (file.name.length < 1) {
} else if (file.size > 1000000) {
alert("File is to big");
} else if (file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg') {
alert("File doesnt match png, jpg or gif");
} else {
isValid = true;
}
});
$(':submit').click(function(e) {
if (!isValid) {
e.preventDefault();
}
else {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
url: "upload_file.php",
type: "post",
dataType: "json",
target: "#status",
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
$("#status").html("HIIII Gais");
}
});
}
});
});