Динамическая загрузка файлов на 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, которые потребуют весь день на разработку, а потом ещё несколько дней на исправление ошибок, решаются за несколько минут с помощью готовых плагинов.
-
Создано 20.01.2014 10:53:02
-
Михаил Русаков
Комментарии (10):
Загрузка файлов на новом JS File API, правда как оно работает, ещё не разобрался: http://javascript.ru/blog/brmaley-ee/fileapi Я думаю это штука покруче чем скачивание готового плагина, если понимать, как она работает.
Ответить
Как раз таки "Если понимать как оно работает"
Ответить
Я, знаете ли, не сторонник делания того, чего я не понимаю, потому-то я и сижу на сайте о том, как сделать собственный движок :)
Ответить
Рысич, надо продвигаться. Экспериментировать, стараться изучить не понятное, лишь таким способом можно достичь чего-то.
Ответить
А я вот не понял, снизу приведён пример кода на php, но куда его вставлять, то есть, создавать для него свой файл или разместить в том же файле где и html код, я не разобрался.
Ответить
Надо создать файл uploadify.php и туда вставить php-код, потому что в json-объекте с настройками для плагина uploadify указано: 'uploader' : 'uploadify.php'. Вообще неплохо бы Вам сразу запомнить, что такой формат {'настройка1': 'значение1', 'настройка2': 'значение2', ... } называется JSON - JavaScript Object Notification - формат объявления объектов в javascript, в таком виде задаются настройки для большинства плагинов, для того же редактора tinymce, да и API некоторых популярных сервисов помимо XML отвечают ещё и в JSON.
Ответить
Как можно сделать видео-загрузчик для своего сайта на php+javascript
Ответить
Изучайте курсы PHP+mySQL
Ответить
при использовании Uploadify У меня при загрузке любого файла почему-то показывает $_FILES['file']['type'] всегда application/octet-stream, хотя должен при загрузке фото показывать image/gif . Почему так, не пойму. Помогите разобраться.
Ответить
Много здесь полезных статей, а много и мусора, как например эта статья - загружает всё подряд, всё что захочет и не работает ограничения. А здесь (http://myrusakov.ru/drag-and-drop-loading-3.html), так вообще только ДРАГ, нет кнопки, и получается, там нет ног, тут нет рук. Ищу ищу, запарился натыкаться на подобное... Сам то проверял скрипт? Зачем выкладывать эту шелуху...
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.