page.html
<form name="upload" class="text-left">
<div class="form-group">
<label for="inputBoardCount">Количество плат в заказе<span class="text-primary">*</span></label>
<input type="number" class="form-control" id="inputBoardCount" placeholder="Введите количество" min="1">
</div>
<div class="form-group">
<label>Прикрепите файлы проекта<span class="text-primary">*</span></label>
<div class="file-upload"><label><input type="file" multiple="multiple" class="form-control-file" id="inputFile"><span class="file-name btn btn-secondary"><span class="icon icon-cloud"></span> Добавить файлы</span></label></div>
<div class="file-upload-progress" style="display:none">
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="mt-2">загружено <span class="loaded"></span class="loaded"> мб из <span class="total"></span> мб</div>
</div>
<div class="ajax-reply" hidden></div>
<div class="success-msg" style="display:none;color:#009900;">Файл успешно загружен</div>
</div>
<div class="form-group">
<div class="error-msg text-primary" style="display:none;"></div>
<button type="button" class="btn btn-lg btn-primary w-100 js-send-order" data-toggle="modal" data-target="#quickOrderModal"><span class="icon icon-magnifer"></span> Получить бесплатную <br>оценку проекта</button>
</div>
</form>
functions.js
jQuery(document).ready(function($){
// ссылка на файл AJAX обработчик
var ajaxurl = '/wp-admin/admin-ajax.php';
// var nonce = '<?= wp_create_nonce('uplfile') ?>';
var files; // переменная. будет содержать данные файлов
// заполняем переменную данными, при изменении значения поля file
$('input[type=file]').on('change', function(){
files = this.files;
$('.file-upload').hide();
$('.file-upload-progress').fadeIn();
$('.error-msg').slideUp();
event.stopPropagation(); // остановка всех текущих JS событий
event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для <a> тега
// ничего не делаем если files пустой
if( typeof files == 'undefined' ) return;
// создадим данные файлов в подходящем для отправки формате
var data = new FormData();
$.each( files, function( key, value ){
data.append( key, value );
});
// добавим переменную идентификатор запроса
data.append( 'action', 'ajax_fileload' );
// data.append( 'nonce', nonce );
// data.append( 'post_id', '5' );
var $reply = $('.ajax-reply');
function setProgress(e) {
if (e.lengthComputable) {
var complete = e.loaded / e.total;
let pr = Math.floor(complete*100)+"%";
$('.progress-bar').css('width', pr);
$('.loaded').text(Math.floor(e.loaded/1000000));
$('.total').text(Math.floor(e.total/1000000));
}
}
// AJAX запрос
// $reply.text( 'Загружаю...' );
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", setProgress, false);
xhr.addEventListener("progress", setProgress, false);
return xhr;
},
url : ajaxurl,
type : 'POST',
data : data,
cache : false,
dataType : 'json',
// отключаем обработку передаваемых данных, пусть передаются как есть
processData : false,
// отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
contentType : false,
// функция успешного ответа сервера
success : function( respond, status, jqXHR ){
// ОК
if( respond.success ){
$.each( respond.data, function( key, val ){
$reply.append( '<p>'+ val +'</p>' );
$('.file-upload-progress').hide();
$('.file-upload').fadeIn();
$('.success-msg').slideDown();
} );
}
// error
else {
$reply.text( 'ОШИБКА: ' + respond.error );
}
},
// функция ошибки ответа сервера
error: function( jqXHR, status, errorThrown ){
$reply.text( 'ОШИБКА AJAX запроса: ' + status );
}
});
});
})
$('.js-send-order').click(function(e) {
e.preventDefault();
var files = $('.ajax-reply').html();
var boardCount = $('#inputBoardCount').val();
if(files == '') {
e.stopPropagation();
$('.error-msg').text('Прикрепите файлы проекта');
$('.error-msg').slideDown();
return;
}
if( boardCount == '' ) {
e.stopPropagation();
$('.error-msg').text('Введите количество плат в заказе');
$('.error-msg').slideDown();
return;
}
$('.error-msg').slideUp();
$('input[name="your-files"]').val(files);
$('input[name="order-amount"]').val(boardCount);
// $(this).blur();
});
functions.php
add_action( 'wp_ajax_'.'ajax_fileload', 'ajax_file_upload_callback' );
add_action( 'wp_ajax_nopriv_'.'ajax_fileload', 'ajax_file_upload_callback' );
// обработчик AJAX запроса
function ajax_file_upload_callback(){
// check_ajax_referer( 'uplfile', 'nonce' ); // защита
if( empty($_FILES) )
wp_send_json_error( 'Файлов нет...' );
$post_id = (int) $_POST['post_id'];
// ограничим размер загружаемой картинки
$sizedata = getimagesize( $_FILES['upfile']['tmp_name'] );
$max_size = 5000;
if( $sizedata[0]/*width*/ > $max_size || $sizedata[1]/*height*/ > $max_size )
wp_send_json_error( __('Картинка не может быть больше чем '. $max_size .'px в ширину или высоту...','km') );
// обрабатываем загрузку файла
require_once ABSPATH . 'wp-admin/includes/image.php';
require_once ABSPATH . 'wp-admin/includes/file.php';
require_once ABSPATH . 'wp-admin/includes/media.php';
// фильтр допустимых типов файлов - разрешим только картинки
add_filter( 'upload_mimes', function( $mimes ){
return [
'jpg|jpeg|jpe' => 'image/jpeg',
'gif' => 'image/gif',
'png' => 'image/png',
];
} );
$uploaded_imgs = array();
foreach( $_FILES as $file_id => $data ){
$attach_id = media_handle_upload( $file_id, $post_id );
// ошибка
if( is_wp_error( $attach_id ) )
$uploaded_imgs[] = 'Ошибка загрузки файла `'. $data['name'] .'`: '. $attach_id->get_error_message();
else
$uploaded_imgs[] = wp_get_attachment_url( $attach_id );
}
wp_send_json_success( $uploaded_imgs );
}