JQuery / Ajax загрузка изображений с анимированным индикатором выполнения
Анимированный индикатор помогает пользователю понять, что загрузка действительно идет. Он делает процесс понятным, снижает ощущение ожидания и позволяет спокойно дождаться завершения отправки файлов или изображений.
В статье вы узнаете, как пошагово собрать рабочий механизм на jQuery и Ajax. Вы настроите форму, обработаете передачу данных и добавите аккуратный прогресс-бар, чтобы загрузка выглядела живо, а поведение интерфейса оставалось предсказуемым.
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" 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 .
<?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-анимации.
- Скачать
Комментарии