Загрузка файлов на сервер путем перетаскивания. Часть 2

Загрузка файлов на сервер путем перетаскивания

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

скачать исходникискачать урок

Начало загрузки файла

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

jQuery('document').ready(function($) {
  $('.upload').upload({
 action:'obr.php',
 label:'Перетащите файл в блок загрузки',
 postKey:'newfile',
 maxQueue:1,
 maxSize:10485760
  })
  .on("start.upload", Start)
  .on("filestart.upload", fileStart)
  .on("fileprogress.upload", fileProgress)
  .on("filecomplete.upload", filePComplelele)
  .on("fileerror.upload", fileError)
  .on("complete.upload", Complete);
 });

Обратите внимание, что для выбранной области приема файлов мы отслеживаем встроенные события виджета Uploads:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

start.upload – начало работы виджета (файлы перемещены в область приема);

filestart.upload – загрузка файла (если перемещено несколько файлов одновременно, данное событие будет срабатывать для каждого файла);

fileprogress.upload – загрузка файла и возвращение прогресса загрузки (если перемещено несколько файлов одновременно, данное событие будет срабатывать для каждого файла);

filecomplete.upload – загрузка файла завершена;

fileerror.upload – ошибка загрузки файла;

complete.upload – окончание работы виджета (все файлы загружены).

События срабатывают при выполнении определенных условий и для каждого события мы опишем функцию обработчик, которая выполнит определенные манипуляции с данными. Итак, начало загрузки файлов – сработает событие start.upload, а значит функция Start(). Код которой приведен ниже:

function Start (e, files) {
 
  console.log('Start');
  var html = '';
  for(var i=0; i < files.length; i++) {
 if(files.size > 10485760) {
 alert('Size');
 }
 html +='<li data-index="' + files.index + '"><span class="file">' + files.name + '</span><progress value="0" max="100"></progress><span class="progress"></span></li>'
  }
  $("#res").append(html);
 }

Функция принимает два параметра: e – объект блока приемника, и files – массив загружаемых файлов. В данной функции можно выполнить предварительные действия перед началом загрузки файлов. К примеру, проверить размер файла, возможно, его имя, формат и т.д. В нашем случае мы будем создавать под каждый файл в блоке с идентификатором res (это пустой блок для отображения результатов), отдельный блок li, где будет отображаться его имя. Доступ к каждому файлу осуществляется, обращением к каждой ячейке массива files.

Ячейка index – содержит индекс (номер) загружаемого файла, особенно это актуально, если загружается несколько файлов одновременно. Ячейка name – содержит имя загружаемого файла.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Загрузка файла

Как только, начинается непосредственная загрузка файла на сервер, выполняется функция fileStart():

function fileStart(e, file) {
 
  console.log('FIle Start');
  $("#res").find('li[data-index='+file.index+']').find('.progress').text('0%');
 }

Второй параметр функции – это данные по загружаемому файлу, опять же его имя, индекс и т.д. В данной функции мы выполняем поиск соответствующего блока li (поиск осуществляем по индексу) и указываем начальное значение прогресса 0%.

Отображение прогресса загрузки файлов

Когда файл загружается на сервер срабатывает событие fileprogress.upload, а значит, выполняется функция fileProgress(), код которой описан ниже:

function fileProgress(e, file, percent) {
 
  console.log('FIle Progress');
  $("#res")
 .find('li[data-index='+file.index+']')
 .find('progress').attr('value',percent)
 .next().text(percent + '%');
 
 }

В данной функции третий параметр — это прогресс загрузки в виде числа, который можно отображать на экране, что собственно мы и делаем.

Окончание загрузки файла

Когда загрузка завершена, срабатывает событие filecomplete.upload, а вместе с ним выполняется функция filePComplelele(), код которой приведен выше:

function filePComplelele (e, file, response) {
  console.log('FIle Complete');
  if(response == '' || response.toLowerCase() == 'error') {
 
 $("#res").find('li[data-index='+file.index+']')
 .addClass('upload_error')
 .find('.progress')
 .text('Ошибка загрузки');
  }
  else {
 $("#res").find('li[data-index='+file.index+']')
 .addClass('upload_ok')
 .find('.progress')
 .text('Загружено');
  }
 }

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

Проверка ошибок и окончание загрузки файла

Как только все файлы были обработаны и загружены на сервер, срабатывает событие complete.upload, которое указывает на то, что работа виджета завершена, при этом выполнится функция Complete(). Для обработки ошибок в виджете Uploads, предусмотрено событие fileerror.upload, которое срабатывает, в случае возникновения различных ошибок, к примеру, если размер файла слишком большой, в этом случае загрузка фала выполнена не будет. Соответственно для данного события так же предусмотрена функция обработчик:

function fileError (e, file) {
 
  console.log('Error');
  $("#res").find('li[data-index='+file.index+']')
 .addClass('upload_error')
 .find('.progress')
 .text('Файл не поддерживается');
 }
 
 function Complete(e) {console.log('Complete');}

Теперь осталось только добавить правила CSS, для более красивого оформления скрипта:

.fs-upload-target {

 height:200px;
}
.fs-upload.fs-upload-dropping .fs-upload-target {
 border-color:green;
} 
progress {
 border:0;
 width: 50%;
 height: 20px;
 border-radius: 5px;
 background: #f1f1f1;
}
progress::-webkit-progress-bar {
 width: 300px;
 height: 20px;
 border-radius: 5px;
 background: #f1f1f1;
}

progress::-moz-progress-bar {
 border-radius: 5px;
 background: #35b545;
}
li.upload_error progress::-moz-progress-bar{
 background: #ff0000 !important;
}
li.upload_error {
 color:#ff0000
}

li {
 list-style-image: none;
 list-style-position: outside;
 list-style-type: none;
 margin-bottom: 10px;
 margin-left: 0;
 margin-right: 0;
 margin-top: 10px;
 text-align: left;
 width: 100%;
}
.file {
 display: block;
 float: left;
 width: 20%;
}
.progress {
 display: block;
 float: right;
 text-align: right;
 width: 30%;
}
.upload_ok {
 color:green;
}

Теперь давайте посмотрим, что у нас получилось. Итак, начало перемещения файла к блоку приемнику:

Загрузка файла слишком большого размера:

Собственно на этом данный урок завершен. Мы с Вами создали механизм загрузки файлов на сервер, путем перетаскивания, используя виджет Uploads, библиотеки Formstone.

Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по программированию на языке PHP

Изучите PHP с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (7)

  1. Дима

    а если у меня есть select на страничке загрузки, как в таком случаи дополнительно передавать value селекта?
    вариант
    postData: ({data: data = $(‘#my_select’).val()})
    не работает, передает только тот value который был выбран при загрузке страницы

  2. Ram

    Работает только в эксплорере. в Mozilla Firefox и Опере что то не срабатывает, когда отпускаешь файл. Загрузка происходит только при нажатии на блоки и после уже классическом выборе файла.

  3. Миха

    Третьего урока не хватает по загрузке конкретно картинок. Хорошо бы тут же вывести миниатюру загруженной картинки с возможностью её удаления.

    • Ram

      В прошлом посте я написал что загрузка работала только в Эксплорере. Это неправда, у меня был какой то глюк с компом. Сейчас по схеме Виктора Гавриленко у меня работает загрузка файлов. Спасибо ему большое за статью. Если кому интересно посмотреть, то вот что получилось: http://www.youphoto.kz
      Буду рад если кто оценит, может будет критика — это тоже полезно знать.
      Заранее спасибо всем! Виктору отдельное спасибо :)

      • Миха

        По поводу критики: если используется скрипт именно для загрузки фото, то сделай проверку на тип файла, что бы ни чего кроме картинок не загружалось !!!

        И цветовые схемы поменять бы под сайт ;)

  4. Миха

    А как справиться с цветом progress’а ?!…

    Пытаешься применить через CSS border, border-radius или background — зеленеет и всё.

    От куда этот цвет лезет, такое ощущение, что слой отдельный (((((((((

  5. Павел

    Подскажите как быть с отображением имени файла в таблице базы данных для отображения на сайте

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree