AJAX форма загрузки файлов на сайт
В этом уроке мы создадим форму загрузки файлов на AJAX, она позволит пользователям загружать файлы со своих компьютеров на ваш сайт. Есть функция перетаскивания файла в нужное окно и кнопка выбора файла. Для успеха нам понадобится обьединение плагинов Jquery File Upload и простого и элегантного кода. В последствии мы стилизуем нашу форму иcпользуя CSS3.
HTML
Как и всегда мы начнём с простой разметки страницы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Mini Ajax File Upload Form</title>
<!-- Google web fonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
<!-- The main CSS file -->
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
Drop Here
<a>Browse</a>
<input type="file" name="upl" multiple />
</div>
<ul>
<!-- The file uploads will be shown here -->
</ul>
</form>
<!-- JavaScript Includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/jquery.knob.js"></script>
<!-- jQuery File Upload Dependencies -->
<script src="assets/js/jquery.ui.widget.js"></script>
<script src="assets/js/jquery.iframe-transport.js"></script>
<script src="assets/js/jquery.fileupload.js"></script>
<!-- Our main JS file -->
<script src="assets/js/script.js"></script>
</body>
</html>
В <head>
я добавил два шрифта из Google Webfonts. Перед закрывающим тегом </body>
можно увидеть ряд библиотек Javascript. Это Kqury Knob Plugin и он зависит от Jquery File Upload Plugin.
Основным элементом на странице является форма #upload
, внутри этого элемента #drop
div, который является окном загрузки файла на сайт. Дальнейшая разметка списка загруженных файлов указана ниже
<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />
<p>Sunset.jpg <i>145 KB</i></p>
<span></span>
</li>
Input Item скрыт с помощью CSS.Его единственная цель является в запуске плагина Jquery Knob. Input
имеет несколько data-аттрибутов, они будут влиять на то как форма будет выглядеть. span
будет отображать иконку справа, при успешной загрузке это зелёная галочка, при какой-либо ошибке - красный крест.
Код Jquery
Есть два способа загрузки файла на сайт пользователем:
- Перетаскивание файла в окно #drop div (во всех браузерах кроме IE);
- Нажатием кнопки "выбрать", в нашем примере это "browse". Это симулирует нажатие на скрытый
input type="file"
, который откроет системное окно выбора файла. Заметьте что форма имеет функцию загрузки нескольких файлов одновременно, все они будут успешно загружены.
assets/js/script.js
$(function(){
var ul = $('#upload ul');
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Something has gone wrong!
data.context.addClass('error');
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
Сейчас наш плагин ещё не работает и даже не имеет оформленного интерфейса. Чтобы заставить форму работать мы должны пройти через некоторое количество конфигурационных вариантов / "callbacks".
- dropZone – Это свойство держит селектор Jquery при котором файл можно будет перетащить в окно загрузки.
- add – Это функция которая вызывается когда файл был добавлен в очередь на загрузку. Добавляет загруженный элемент и его презентацию в список .
- progress – Это плагин выполняемый каждые 100миллисекунд (настраиваемо). Второй аргумент data attribute) засекает какой размер файла был передан.
- fail – При ошибках загрузки, завязан на PHP. Например upload.php не найден и подобное.
Php скрипт
Jquery File Upload уже идёт вместе с PHP скриптом для обработки загруженных файлов, но для этого урока мы создадим собственный скрипт. Вы можете получить доступ к информации о загружаемых файлов через массив $ _FILES:
<?php
// A list of permitted file extensions
$allowed = array('png', 'jpg', 'gif','zip');
if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){
$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);
if(!in_array(strtolower($extension), $allowed)){
echo '{"status":"error"}';
exit;
}
if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
echo '{"status":"success"}';
exit;
}
}
echo '{"status":"error"}';
exit;
Файлы просто перемещаются в папку загрузок, но вы можете расширить скрипт добавив проверку загружаемых файлов.