Сегодняшний урок посвящен созданию формы загрузки файлов на сайт с помощью jQuery.
Порой формы для загрузки множества файлов просто необходимы для Ваших приложений, но сделать их не такое уж и простое задание.
Благодаря jQuery данный процесс существенно облегчается.
В данном уроке будет использоваться последняя версия фреймворка jQuery и плагина Ajax upload () от Андрея Валумса. Обе они находятся в исходниках к данному уроку.
Демо не выкладываю, чтобы не загружать наш сервер разными картинками от пользователей. Можете попробовать у себя - все прекрасно работает.
Структура HTML
Прежде всего, давайте создадим кнопку загрузки, при нажатии на которую будет открываться диалоговое окно выбора файла
<div id="upload" >Upload File</div>
Вы можете использовать любой элемент для кнопки. В примере выше я использовал div. Были применены следующие стили:
#upload{
margin:30px 200px; padding:15px;
font-weight:bold; font-size:1.3em;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
background:#f2f2f2;
color:#3366cc;
border:1px solid #ccc;
width:150px;
cursor:pointer !important;
-moz-border-radius:5px; -webkit-border-radius:5px;
}
Также рядом с кнопкой необходимо добавить span элемент для показа разных сообщений во время загрузки. Для показа загруженых файлов юзеру, также был добавлен неупорядоченный список после кнопки. Вот полный код:
<!-- Upload Button-->
<div id="upload" >Upload File</div><span id="status" ></span>
<!--List Files-->
<ul id="files" ></ul>
PHP код
Ниже представлен простой PHP код, который выдает сообщение "Успех" при правильной загрузке, и "Ошибка"
<?php
$uploaddir = './uploads/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']);
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
echo "success";
} else {
echo "error";
}
?>
JavaScript код
JavaScript выполняет основную работу. Данный код необходимо поместить в шапку документа:
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
//Name of the file input box
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// check for valid file extension
status.text('Only JPG, PNG or GIF files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
Объяснение кода: для использования библиотеки AJAX Upload нам необходимо ее инициализировать и дать ей параметры. Первый параметр это id кнопки, на которую будет нажимать пользователь. Второй параметр это скрипт, который будет справляться с загрузкой. Второй параметр может принять массив разных опций для придания большего контроля над процессом.
Так было и сделано.
- action - путь к скриптам на стороне сервера
- name - имя ячейки ввода файла, которое будет использоваться для загрузки
- onSubmit - позволяет Вам выполнить функции перед загрузкой. К примеру, можно проверить расширение файлов, как и было сделано.
- onComplete - позволяет Вам выполнять действия после загрузки. К примеру, показ загруженной картинки юзеру.
Спасибо за внимание!