I am writing a WordPress gallery plugin and I want to show a progress bar on file upload. My current code works and files are uploaded correctly, but after upload finishes the uploading page looks like it is loaded twice. Does anyone know what might be causing such behavior? I already managed to narrow down the problem to jQuery, without the jQuery code page reloads correctly. Video: https://youtu.be/QDmk6xI1nK8
html:
<form id="image_upload" method="post" enctype="multipart/form-data">
Prześlij obrazek/obrazki: <br>
<input type="file" id="upload_file" name="file_to_upload[]" multiple="multiple"><br>
<input class="button button-primary button-large" type="submit" name="save" value="Prześlij">
<div id="progress-div"><div id="progress-bar"></div></div>
<div id="targetLayer"></div>
</form>
php:
if (isset ( $_FILES["file_to_upload"] ) ){
print_r( $_FILES );
// Count total files
$countfiles = count($_FILES['file_to_upload']['name']);
// Looping all files
for($i=0;$i<$countfiles;$i++){
if ( $_FILES['file_to_upload']['error'][$i] == 0 && $_FILES['file_to_upload']['type'][$i] == 'image/jpeg' || $_FILES['file_to_upload']['type'][$i] == 'image/png' || $_FILES['file_to_upload']['type'][$i] == 'image/gif' && $_FILES['file_to_upload']['size'][$i] <= 10485760 ){
$filename = $_FILES['file_to_upload']['name'][$i];
// Upload file
move_uploaded_file($_FILES['file_to_upload']['tmp_name'][$i], ABSPATH . '/wp-content/uploads/protex_gallery_images/'.$filename);
}
if ( $_FILES['file_to_upload']['error'][$i] == 1 ){
echo "There was an error uploading image: " . print_r( $_FILES['file_to_upload']['error'][$i] );
}
if ( $_FILES['file_to_upload']['size'][$i] > 10485760 ){
echo "File " . $_FILES['file_to_upload']['name'][$i] . " is too big to upload it.";
}
if ( $_FILES['file_to_upload']['type'][$i] != 'image/jpeg' && $_FILES['file_to_upload']['type'][$i] != 'image/png' && $_FILES['file_to_upload']['type'][$i] != 'image/gif' ){
echo "File " . $_FILES['file_to_upload']['name'][$i] . " is not an image.";
}
}
}
jquery:
jQuery(document).ready(function() {
jQuery('#image_upload').submit(function(e) {
//alert('alert working!');
if(jQuery('#upload_file').val()) {
e.preventDefault();
jQuery(this).ajaxSubmit({
target: '#targetLayer',
beforeSubmit: function() {
jQuery("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total, percentComplete){
jQuery("#progress-bar").width(percentComplete + '%');
jQuery("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>');
},
success: function(){
},
complete: function(){
},
resetForm: true
});
return false;
}
});
});
