JQuery / Ajax загрузка изображений с анимированным индикатором выполнения

Функционал для загрузки файлов должен иметь индикатор выполнения. Но большинство разработчиков почему-то игнорируют этот элемент. Пользователи не должны оставаться в неведении о текущем прогрессе загрузки. Это обеспечивает лучший опыт взаимодействия.

В этом статье мы научимся создавать анимированный индикатор загрузки файлов через AJAX, используя jQuery.

После выбора файла его двоичный код загружается в PHP с помощью AJAX. После отправки запроса на загрузку файла в скрипт AJAX выводит jQuery- анимацию, чтобы показать индикатор выполнения загрузки. В нашем примере для обработки загрузки изображений с помощью AJAX используется плагин jQuery Form.

Содержание

HTML-форма с загрузкой файла изображения

На целевой странице отображается HTML-форма с элементом загрузки файла. Пользователи выбирают файл и отправляют его с помощью AJAX.

Библиотеки jQuery и jQuery Form подключены в начале скрипта. Скрипт валидации jQuery проверяет, был ли выбран файл изображения перед отправкой формы.

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    type="text/javascript"></script>
<script type="text/javascript" src="jquery.form.min.js"></script>

</head>
<body>
    <h1>jQuery Ajax Image Upload with Animating Progress Bar</h1>
    <div class="form-container">
        <form action="uploadFile.php" id="uploadForm" name="frmupload"
            method="post" enctype="multipart/form-data">
            <input type="file" id="uploadImage" name="uploadImage" /> <input
                id="submitButton" type="submit" name='btnSubmit'
                value="Submit Image" />

        </form>
        <div class='progress' id="progressDivId">
            <div class='progress-bar' id='progressBar'></div>
            <div class='percent' id='percent'>0%</div>
        </div>
        <div style="height: 10px;"></div>
        <div id='outputImage'></div>
    </div>
</body>
</html>

Отправка данных формы с помощью AJAX для выполнения загрузки файла

Для отправки данных формы с помощью AJAX используется библиотека jQuery Form. Функция ajaxForm() применяет для отправки в PHP файлов с изображениями.

Ход загрузки отображается с помощью индикатора в функции обратного вызова uploadProgress. Также для создания эффекта прогресса вызывается jQuery-метод animate().

<script type="text/javascript">
$(document).ready(function () {
    $('#submitButton').click(function () {
    	    $('#uploadForm').ajaxForm({
    	        target: '#outputImage',
    	        url: 'uploadFile.php',
    	        beforeSubmit: function () {
    	        	  $("#outputImage").hide();
    	        	   if($("#uploadImage").val() == "") {
    	        		   $("#outputImage").show();
    	        		   $("#outputImage").html("<div class='error'>Choose a file to upload.</div>");
                    return false; 
                }
    	            $("#progressDivId").css("display", "block");
    	            var percentValue = '0%';

    	            $('#progressBar').width(percentValue);
    	            $('#percent').html(percentValue);
    	        },
    	        uploadProgress: function (event, position, total, percentComplete) {

    	            var percentValue = percentComplete + '%';
    	            $("#progressBar").animate({
    	                width: '' + percentValue + ''
    	            }, {
    	                duration: 5000,
    	                easing: "linear",
    	                step: function (x) {
                        percentText = Math.round(x * 100 / percentComplete);
    	                    $("#percent").text(percentText + "%");
                        if(percentText == "100") {
                        	   $("#outputImage").show();
                        }
    	                }
    	            });
    	        },
    	        error: function (response, status, e) {
    	            alert('Oops something went.');
    	        },
    	        
    	        complete: function (xhr) {
    	            if (xhr.responseText && xhr.responseText != "error")
    	            {
    	            	  $("#outputImage").html(xhr.responseText);
    	            }
    	            else{  
    	               	$("#outputImage").show();
        	            	$("#outputImage").html("<div class='error'>Problem in uploading file.</div>");
        	            	$("#progressBar").stop();
    	            }
    	        }
    	    });
    });
});
</script>

PHP-код загрузчика файлов

Это обычный PHP-скрипт для загрузки файлов в целевую папку. Переменные файла хранятся в суперглобальном массиве $_FILES. Функция move_uploaded_file() используется для перемещения загруженного файла в целевую папку uploads .

<?php
if (isset($_POST['btnSubmit'])) {
    $uploadfile = $_FILES["uploadImage"]["tmp_name"];
    $folderPath = "uploads/";
    
    if (! is_writable($folderPath) || ! is_dir($folderPath)) {
        echo "error";
        exit();
    }
    if (move_uploaded_file($_FILES["uploadImage"]["tmp_name"], $folderPath . $_FILES["uploadImage"]["name"])) {
        echo '<img src="' . $folderPath . "" . $_FILES["uploadImage"]["name"] . '">';
        exit();
    }
}
?>

Загрузка изображения с анимированным индикатором выполнения

Вот как будет выглядеть Ajax-загрузка изображения с индикатором выполнения на основе jQuery-анимации.

Скачать

Данная публикация представляет собой перевод статьи «jQuery Ajax Image Upload with Animating Progress Bar» , подготовленной дружной командой проекта Интернет-технологии.ру