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

Дата публикации: 2015-06-24

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

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

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

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

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[i].size > 10485760) {
				alert('Size');
			}
			html +='<li data-index="' + files[i].index + '"><span class="file">' + files[i].name + '</span><progress value="0" max="100"></progress><span class="progress"></span></li>'
		}
		$("#res").append(html);
	}

function Start (e, files) {

console.log('Start');

var html = '';

for(var i=0; i < files.length; i++) {

if(files[i].size > 10485760) {

alert('Size');

}

html +='<li data-index="' + files[i].index + '"><span class="file">' + files[i].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%');
	}

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 + '%');
		
	}

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('Загружено');
		}
	}

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');}

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;
}

.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.

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

Метки: загрузка файлов