Недавно у меня спросили, как сделать динамическую загрузку файлов на jQuery . Собственно, этот вопрос мне уже задавали давно, но когда не было раздела по jQuery , было крайне проблематично написать эту статью. Но сейчас уже ничто не мешает рассказать о том, как сделать динамическую загрузку файлов на сервер .
Недавно у меня спросили, как сделать динамическую загрузку файлов на jQuery. Собственно, этот вопрос мне уже задавали давно, но когда не было раздела по jQuery, было крайне проблематично написать эту статью. Но сейчас уже ничто не мешает рассказать о том, как сделать динамическую загрузку файлов на сервер.
Безусловно, без стороннего плагина будет крайне тяжело обойтись. Из всех вариантов мне больше всех понравился Uploadify. Скачать его можно здесь: http://www.uploadify.com/download/.
Там на сайте всё расписано очень хорошо, плюс сам плагин достаточно простой, однако, всё-таки поясню всё на примере. Для начала привожу простой код HTML-страницы:
<!DOCTYPE HTML>
<html>
<head>
<title>Загрузка файлов</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Загрузка файлов</h1>
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadify({
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'uploader' : 'uploadify.php'
});
});
</script>
</body>
</html>
Файл стилей стандартный для этого плагина, и он так же скачивается в общем наборе файлов с официального сайта. Безусловно, его можно менять на своё усмотрение.
Так же подключается jQuery и сам плагин. Дальше создаётся форма, а у input с type="file" ставится id, который затем уже будет использоваться в скрипте.
В самом скрипте передаются данные в formData. А именно текущее время и секретный токен. Вместо "unique_salt" может быть любая секретная строка. В свойстве "uploader" передаётся скрипт-обработчик. Теперь сам код этого обработчика:
<?php
$targetFolder = '/uploads'; // Куда загружать файлы
$verifyToken = md5('unique_salt' . $_POST['timestamp']); // Создаём токен аналогичный тому, что получен из JavaScript
if (!empty($_FILES) && $_POST['token'] == $verifyToken) { // Если токены совпадают, значит, можно загружать файлы
/* Создаём полный путь к загружаемому файлу */
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
$fileTypes = array('jpg','jpeg','gif','png'); // Разрешённые расширения
$fileParts = pathinfo($_FILES['Filedata']['name']); // Получаем расширение у загружаемого файла
if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,$targetFile); // Если расширение загружаемого файла разрешено, то загружаем файл
echo '1';
} else echo 'Invalid file type.'; // Выводим ошибку
}
?>
Код я прокомментировал, поэтому, думаю, что в нём разобраться не составит труда. Единственное, что отмечу - проверок здесь недостаточно. Впрочем, про безопасную загрузку изображений я писал в отдельной статье.
ProgressBar в этот плагин так же встроен, так что всё уже сделали за нас. В этом и состоит преимущество библиотеки jQuery и плагинов для неё. Очень сложные задачи, такие как динамическая загрузка файлов на сервер с ProgressBar, которые потребуют весь день на разработку, а потом ещё несколько дней на исправление ошибок, решаются за несколько минут с помощью готовых плагинов.
