<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Динамическая загрузка файлов на 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, которые потребуют весь день на разработку, а потом ещё несколько дней на исправление ошибок, решаются за несколько минут с помощью готовых плагинов.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (10):

rysich rysich 21.01.2014 15:37:16

Загрузка файлов на новом JS File API, правда как оно работает, ещё не разобрался: http://javascript.ru/blog/brmaley-ee/fileapi Я думаю это штука покруче чем скачивание готового плагина, если понимать, как она работает.

Ответить

tikkiwiki tikkiwiki 21.01.2014 16:24:44

Как раз таки "Если понимать как оно работает"

Ответить

rysich rysich 21.01.2014 16:55:15

Я, знаете ли, не сторонник делания того, чего я не понимаю, потому-то я и сижу на сайте о том, как сделать собственный движок :)

Ответить

tikkiwiki tikkiwiki 23.01.2014 11:46:25

Рысич, надо продвигаться. Экспериментировать, стараться изучить не понятное, лишь таким способом можно достичь чего-то.

Ответить

logaut logaut 23.01.2014 15:35:36

А я вот не понял, снизу приведён пример кода на php, но куда его вставлять, то есть, создавать для него свой файл или разместить в том же файле где и html код, я не разобрался.

Ответить

rysich rysich 24.01.2014 00:10:04

Надо создать файл uploadify.php и туда вставить php-код, потому что в json-объекте с настройками для плагина uploadify указано: 'uploader' : 'uploadify.php'. Вообще неплохо бы Вам сразу запомнить, что такой формат {'настройка1': 'значение1', 'настройка2': 'значение2', ... } называется JSON - JavaScript Object Notification - формат объявления объектов в javascript, в таком виде задаются настройки для большинства плагинов, для того же редактора tinymce, да и API некоторых популярных сервисов помимо XML отвечают ещё и в JSON.

Ответить

prog prog 24.02.2014 13:41:34

Как можно сделать видео-загрузчик для своего сайта на php+javascript

Ответить

tikkiwiki tikkiwiki 04.03.2014 14:02:00

Изучайте курсы PHP+mySQL

Ответить

Алексей Алексей 04.04.2014 23:14:39

при использовании Uploadify У меня при загрузке любого файла почему-то показывает $_FILES['file']['type'] всегда application/octet-stream, хотя должен при загрузке фото показывать image/gif . Почему так, не пойму. Помогите разобраться.

Ответить

root root 22.05.2015 18:30:59

Много здесь полезных статей, а много и мусора, как например эта статья - загружает всё подряд, всё что захочет и не работает ограничения. А здесь (http://myrusakov.ru/drag-and-drop-loading-3.html), так вообще только ДРАГ, нет кнопки, и получается, там нет ног, тут нет рук. Ищу ищу, запарился натыкаться на подобное... Сам то проверял скрипт? Зачем выкладывать эту шелуху...

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.