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

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

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" ></script><script 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>$(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.

<?phpif(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 загрузка картинок с анимированным индикатором выполнения

Скачать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *