php 使用进度条上传文件

Posted 2021-05-04

<form name="upload" class="text-left">
	<div class="form-group">
		<label for="inputBoardCount">Количество плат в&nbsp;заказе<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>

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();
});

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 );

}