Веб-дизайнеру
Веб-разработчику
Дополнительно
Мини Ajax форма загрузки файла + JQuery эффекты!
Скачать
Демо
↓ Также Вам будет интересно ↓
В этом уроке у нас в плане форма загрузки файла, которая позволит посетителям загружать файлы простым перетаскиванием их в окно браузера или же выбрав их, нажав на кнопку “Загрузить”.
Для этой цели мы будем использовать комбинацию jQuery File Upload плагина с изящным jQuery Knob современным интерфейсом на основе CSS3 & JS. В итоге у Вас будет ajax загрузка файлов, без перезагрузки страницы, и с отличным дизайном.
HTML
Как обычно, начнем с основного документа – разметки html5. Весь документ имеет следующий вид:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Лучшая Ajax форма загрузки файла + JQuery эффекты! | Vladmaxi.net</title> <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' /> <link rel="stylesheet" type="text/css" href="/web-developer/jquery/css/style.css" /> </head> <body> <form id="upload" method="post" action="upload.php" enctype="multipart/form-data"> <div id="drop"> Добавить файлы сюда <a>Загрузить</a> <input type="file" name="upl" multiple /> </div> <ul> <!-- Файлы будут загружаться здесь --> </ul> </form> <!-- JavaScript --> <script src="/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="/web-developer/jquery/js/jquery.knob.js"></script> <!-- jQuery загрузка файлов --> <script src="/web-developer/jquery/js/jquery.ui.widget.js"></script> <script src="/web-developer/jquery/js/jquery.iframe-transport.js"></script> <script src="/web-developer/jquery/js/jquery.fileupload.js"></script> <!-- Основной JS файл --> <script src="/web-developer/jquery/js/script.js"></script> </body> </html> |
В заголовке документа, мы подключаем два шрифта WebFonts Google (их подключение не является обязательным, если хотите, можете поменять шрифт). Перед закрывающим тегом body Вы можете видеть ряд JavaScript скриптов. Это библиотека JQuery, плагин и плагин .
Основным элементом на странице, является форма #upload. Внутри неё #drop (который является областью, при перетаскивании на которую, начинается загрузка файла) и неупорядоченный список ul. Этот список будет содержать все загруженные файлы, их состояние. Ниже Вы можете увидеть разметку, созданную для загрузки файла:
|
1 2 3 4 5 |
<li class="working"> <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 в приведенном выше отрывке скрыт через CSS. Его единственное назначение состоит в инициализации JQuery плагина Knob и вывод красивого “значка” загрузки.
Также он имеет ряд атрибутов data-*, которые изменяют внешний вид “значка” загрузки. Тег span содержит значок справа – это может быть либо галочка или красный крест.
JQuery код
Есть два способа, с помощью которых пользователь может загрузить файлы:
- Перетащить файл в браузер, внутрь элемента
#drop; - Нажав на кнопку
"Загрузить". Это будет имитировать нажатие на скрытыйinput file, системное окно просмотра файлов на компьютере. Обратите внимание,inputимеет несколько параметров, что позволяет загружать сразу несколько файлов, просто выделив их (но файлы все равно будут загружены каждый индивидуально!).
По умолчанию, плагин помещает файлы в очередь, но мы сделаем загрузки файлов автоматически после их выбора. Вы можете увидеть JavaScript ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
$(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'; } }); |
Плагин jQuery File Upload поставляется с собственным JQuery UI интерфейсом, который можно использовать прямо сейчас. Однако нам нужен полностью пользовательский интерфейс, поэтому мы будем использовать базовую версию плагина, которая не включает в себя дизайн.
Для работы формы загрузки файлов, мы передаем несколько конфигураций / обратных вызовов, а именно:
dropZone– это свойство содержит JQuery селектор элемента, который будет выступать в качестве области для перетаскивания. Файлы, которые попали на него будут добавлены в очередь на загрузку.add– эта функция обратного вызова вызывается при добавлении файла в очередь. Внутри него, мы создаем HTML разметку, которая будет представлять файл, добавлять его в списокulи вызыватьdata.submit (). Это приведет к прямой загрузке файлов, без ожидания.progress– этот обратный вызов выполняется с помощью плагина каждые 100 мс (настраивается). Второй аргумент (данные атрибутов) содержит размер файла и сколько байт было загружено. Это позволяет рассчитать процент, а затем обновить скрытый элементinput, который в свою очередь, обновляет “значок” статуса загрузки.fail– эта функция обратного вызова выполняется, если есть проблемы с Вашим PHP скриптом. Это, скорее всего, означает, что файлupload.phpотсутствует или есть какая-то ошибка (используйте инспектор веб-браузера для настройки любых потенциальных проблем).
Свойство data.context сохраняется между вызовами этого плагина. Таким образом, мы знаем, какой li пункт, на какой стадии загрузки.
PHP скрипт
Плагин jQuery File Upload также поставляется с мощным PHP скриптом для обработки загрузки файлов, которые вы можете поставить на свой сервер, но для этого урока, мы создадим свой собственный.
Загрузка файлов отправляется практически так же, как регулярная форма загрузки – Вы можете получить доступ к информации о добавлении через массив $ _FILES:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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; |
Как уже говорилось выше, хотя мы можем выбрать сразу кучу файлов, они будут загруженные по одному. Это делает его еще проще в обращении с нашим PHP скриптом.
В настоящее время файлы просто помещаются в папку /uploads, но вы можете расширить это, добавив проверку подлинности или создания записей в базе данных.
Готово. Мы сделали!
Я надеюсь, что эта ajax загрузка файлов оказалась для вас полезной! Желаю успехов! 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
http://vk.com/slomo @
Привет) А как сделать так, чтобы человек мог загружать только одно фото?