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

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

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

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

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

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

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

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

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

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

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

Метки:

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

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

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

  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 — зеленеет и всё.

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

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

Ваш 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