-
-
Save blia/62f71b16d3123d571e5c5e2e942dbba7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var previewWidth = 320, // ширина превью | |
previewHeight = 240, // высота превью | |
maxFileSize = 5 * 1024 * 1024, // (байт) Максимальный размер файла (2мб) | |
selectedFiles = {},// объект, в котором будут храниться выбранные файлы | |
queue = [], | |
image = new Image(), | |
imgLoadHandler, | |
isProcessing = false, | |
errorMsg, // сообщение об ошибке при валидации файла | |
previewPhotoContainer = document.querySelector('#preview-photo'), // контейнер, в котором будут отображаться превью | |
modalPhotoContainer = document.querySelector('#modal-preview-photo'); | |
// Когда пользователь выбрал файлы, обрабатываем их | |
$('input[type=file][id=file]').on('change', function() { | |
var newFiles = $(this)[0].files; // массив с выбранными файлами | |
for (var i = 0; i < newFiles.length; i++) { | |
var file = newFiles[i]; | |
// В качестве "ключей" в объекте selectedFiles используем названия файлов | |
// чтобы пользователь не мог добавлять один и тот же файл | |
// Если файл с текущим названием уже существует в массиве, переходим к следующему файлу | |
if (selectedFiles[file.name] != undefined) continue; | |
// Валидация файлов (проверяем формат и размер) | |
if ( errorMsg = validateFile(file) ) { | |
alert(errorMsg); | |
return; | |
} | |
// Добавляем файл в объект selectedFiles | |
selectedFiles[file.name] = file; | |
queue.push(file); | |
} | |
$(this).val(''); | |
processQueue(); // запускаем процесс создания миниатюр | |
}); | |
// Валидация выбранного файла (формат, размер) | |
var validateFile = function(file) | |
{ | |
if ( !file.type.match(/image\/(jpeg|jpg|png|gif)/) ) { | |
return 'Фотография должна быть в формате jpg, png или gif'; | |
} | |
if ( file.size > maxFileSize ) { | |
return 'Размер фотографии не должен превышать 2 Мб'; | |
} | |
}; | |
var listen = function(element, event, fn) { | |
return element.addEventListener(event, fn, false); | |
}; | |
// Создание миниатюры | |
var processQueue = function() | |
{ | |
// Миниатюры будут создаваться поочередно | |
// чтобы в один момент времени не происходило создание нескольких миниатюр | |
// проверяем запущен ли процесс | |
if (isProcessing) { return; } | |
// Если файлы в очереди закончились, завершаем процесс | |
if (queue.length == 0) { | |
isProcessing = false; | |
return; | |
} | |
isProcessing = true; | |
var file = queue.pop(); // Берем один файл из очереди | |
var li = document.createElement('LI'); | |
var modalLi = document.createElement('LI'); | |
var span = document.createElement('SPAN'); | |
var modalSpan = document.createElement('SPAN'); | |
var spanDel = document.createElement('SPAN'); | |
var canvas = document.createElement('CANVAS'); | |
var ctx = canvas.getContext('2d'); | |
span.setAttribute('class', 'img'); | |
spanDel.setAttribute('class', 'delete'); | |
spanDel.innerHTML = 'Удалить'; | |
li.appendChild(span); | |
li.appendChild(spanDel); | |
li.setAttribute('data-id', file.name); | |
modalLi.appendChild(modalSpan); | |
modalLi.appendChild(spanDel); | |
modalLi.setAttribute('data-id', file.name); | |
image.removeEventListener('load', imgLoadHandler, false); | |
// создаем миниатюру | |
imgLoadHandler = function() { | |
ctx.drawImage(image, 0, 0, previewWidth, previewHeight); | |
URL.revokeObjectURL(image.src); | |
span.appendChild(canvas); | |
modalSpan.appendChild(canvas.cloneNode()); | |
isProcessing = false; | |
setTimeout(processQueue, 200); // запускаем процесс создания миниатюры для следующего изображения | |
}; | |
listen(image, 'load', imgLoadHandler); | |
image.src = URL.createObjectURL(file); | |
// Выводим миниатюру в контейнере previewPhotoContainer | |
previewPhotoContainer.appendChild(li); | |
modalPhotoContainer.appendChild(modalLi); | |
// Сохраняем содержимое оригинального файла в base64 в отдельном поле формы | |
// чтобы при отправке формы файл был передан на сервер | |
var fr = new FileReader(); | |
fr.readAsDataURL(file); | |
fr.onload = (function (file) { | |
return function (e) { | |
$('#preview-photo').append( | |
'<input type="hidden" name="screenshot[]" value="' + e.target.result + '" data-id="' + file.name+ '">' | |
); | |
} | |
}) (file); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment