96
23. Технические характеристики Kyocera Ecosys M2735DN. URL:
https://www.kyoceradocumentsolutions.ru/index/products/product/ecosysm2735
dn.technical_specification.html
24. Технические характеристики Mitsubishi Electric CP-D80DW.
URL: https://mitsubishielectric-printing.com/en/products/photo-printers-
solutions/photo-printers/cp-d80dw
97
Приложение 1. Листинг программных модулей
Программный код файла javascript.js
var $ = jQuery.noConflict();
$(document).ready(function() {
jQuery.event.props.push('dataTransfer');
// Максимальное количество загружаемых изображений за одни раз var maxFiles
= 100;
// Оповещение по умолчанию
var errMessage = 0;
// Кнопка выбора файлов
var defaultUploadBtn = $('#uploadbtn');
// Массив для всех изображений
var dataArray = [];
// Область информер о загруженных изображениях - скрыта
$('#uploaded-files').hide();
// Метод при падении файла в зону загрузки
$('#drop-files').on('drop', function(e) {
// Передаем в files все полученные изображения
var files = e.dataTransfer.files;
// Проверяем на максимальное количество файлов
if (files.length <= maxFiles) {
// Передаем массив с файлами в функцию загрузки на предпросмотр
loadInView(files);
} else {
alert('Вы не можете загружать больше ' + maxFiles + ' изображений!');
98
files.length = 0;
return;
}
});
// При нажатии на кнопку выбора файлов
defaultUploadBtn.on('change', function() {
// Заполняем массив выбранными изображениями
var files = $(this)[0].files;
// Проверяем на максимальное количество файлов
if (files.length <= maxFiles) {
// Передаем массив с файлами в функцию загрузки на предпросмотр
loadInView(files);
// Очищаем инпут файл путем сброса формы
$('#frm').each(function() {
this.reset();
});
} else {
alert('Вы не можете загружать больше ' + maxFiles + ' изображений!');
files.length = 0;
}
});
// Функция загрузки изображений на предросмотр
function loadInView(files) {
// Показываем обасть предпросмотра
$('#uploaded-holder').show();
// Для каждого файла
99
$.each(files, function(index, file) {
// Несколько оповещений при попытке загрузить не изображение
if (!files[index].type.match('image.*')) {
if (errMessage == 0) {
$('#drop-files p').html('Эй! только изображения!');
++errMessage
} else if (errMessage == 1) {
$('#drop-files p').html('Стоп! Загружаются только изображения!');
++errMessage
} else if (errMessage == 2) {
$('#drop-files p').html("Не умеешь читать? Только изображения!");
++errMessage
} else if (errMessage == 3) {
$('#drop-files p').html("Хорошо! Продолжай в том же духе");
errMessage = 0;
}
return false;
}
// Проверяем количество загружаемых элементов
if ((dataArray.length + files.length) <= maxFiles) {
// показываем область с кнопками
$('#upload-button').css({
'display': 'block'
});
} else {
alert('Вы не можете загружать больше ' + maxFiles + ' изображений!');
return;
}
100
// Создаем новый экземпляра FileReader
var fileReader = new FileReader();
// Инициируем функцию FileReader
fileReader.onload = (function(file) {
return function(e) {
// Помещаем URI изображения в массив
dataArray.push({
name: file.name,
value: this.result
});
addImage((dataArray.length - 1));
};
})(files[index]);
// Производим чтение картинки по URI
fileReader.readAsDataURL(file);
});
return false;
}
// Процедура добавления эскизов на страницу
function addImage(ind) {
// Если индекс отрицательный значит выводим весь массив изображений
if (ind < 0) {
start = 0;
end = dataArray.length;
} else {
// иначе только определенное изображение
start = ind;
end = ind + 1;
}
101
// Оповещения о загруженных файлах
if (dataArray.length == 0) {
// Если пустой массив скрываем кнопки и всю область
$('#upload-button').hide();
$('#uploaded-holder').hide();
} else if (dataArray.length == 1) {
$('#upload-button span').html("Был выбран 1 файл");
} else {
$('#upload-button span').html(dataArray.length + " файлов были выбраны");
}
// Цикл для каждого элемента массива
for (i = start; i < end; i++) {
// размещаем загруженные изображения
if ($('#dropped-files > .image').length <= maxFiles) {
$('#dropped-files').append('<div id="img-' + i + '" class="image"
style="display:inline-block;background: url(' + dataArray[i].value + '); background-
size: cover;"> <a href="' + dataArray[i].value + '" data-fancybox><img id="' + i + '"
src="' + dataArray[i].value + '"style="opacity:0.0;filter:alpha(opacity=0)"
width=100%></a><div class="drop-button">копии <input type="text"
value="1" size="1" placeholder="кол вол копий данной фото"/><datalist
id="333"><option value="1">1</option></datalist><a href="#" id="drop-' + i + '"
> Удалить изображение</a></div><br></div>');
//$('#dropped-files').append('<br><input type="text" value="1" size="1"
placeholder="кол вол копий данной фото"/>');
}
}
return false;
}
// Функция удаления всех изображений
function restartFiles() {
102
// Установим бар загрузки в значение по умолчанию
$('#loading-bar .loading-color').css({
'width': '0%'
});
$('#loading').css({
'display': 'none'
});
$('#loading-content').html(' ');
// Удаляем все изображения на странице и скрываем кнопки
$('#upload-button').hide();
$('#dropped-files > .image').remove();
$('#uploaded-holder').hide();
// Очищаем массив
dataArray.length = 0;
return false;
}
// Удаление только выбранного изображения
$("#dropped-files").on("click", "a[id^='drop']", function() {
// получаем название id
var elid = $(this).attr('id');
// создаем массив для разделенных строк
var temp = new Array();
// делим строку id на 2 части
temp = elid.split('-');
// получаем значение после тире тоесть индекс изображения в массиве
dataArray.splice(temp[1], 1);
// Удаляем старые эскизы
103
$('#dropped-files > .image').remove();
// Обновляем эскизи в соответсвии с обновленным массивом
addImage(-1);
});
$("#dropped-files").on("click", "div[id^='img']", function() {
// получаем название id
var elid = $(this).attr('id');
// создаем массив для разделенных строк
// elid=elid.substr(4);
// alert(elid);
// alert(dataArray[0].value);
// // $('#preview').append('<div id="img-'+elid+'" class="image"
style="background: url('+dataArray[elid].value+');width:600px;height:1200px;
background-size: contain;"><a href=>ляля</a> <a href="#" id="drop-'+i+'"
class="drop-button"></a></div>');
// $('#preview').append('<a href="'+dataArray[elid].value+'" data-
fancybox><img id="'+elid+'" src="'+dataArray[elid].value+'"></a>');
//
// document.getElementById ('#preview').click ();
});
// Удалить все изображения кнопка
$('#dropped-files #upload-button .delete').click(restartFiles);
// Загрузка изображений на сервер
$('#upload-button .upload').click(function() {
104
// Показываем прогресс бар
$("#loading").show();
// переменные для работы прогресс бара
var totalPercent = 100 / dataArray.length;
var x = 0;
$('#loading-content').html('Загружен ' + dataArray[0].name);
// Для каждого файла
$.each(dataArray, function(index, file) {
// загружаем страницу и передаем значения, используя HTTP POST запрос
$.post('upload.php', dataArray[index], function(data) {
var fileName = dataArray[index].name;
++x;
// Изменение бара загрузки
$('#loading-bar .loading-color').css({
'width': totalPercent * (x) + '%'
});
// Если загрузка закончилась
if (totalPercent * (x) == 100) {
// Загрузка завершена
$('#loading-content').html('Загрузка завершена!');
// Вызываем функцию удаления всех изображений после задержки 1
секунда
setTimeout(restartFiles, 1000);
// если еще продолжается загрузка
} else if (totalPercent * (x) < 100) {
// Какой файл загружается
$('#loading-content').html('Загружается ' + fileName);
}
105
// Формируем в виде списка все загруженные изображения
// data формируется в upload.php
var dataSplit = data.split(':');
if (dataSplit[1] == 'загружен успешно') {
$('#uploaded-files').append('<li><a href="images/' + dataSplit[0] + '">' +
fileName + '</a> загружен успешно</li>');
} else {
$('#uploaded-files').append('<li><a href="images/' + data + '. Имя файла:
' + dataArray[index].name + '</li>');
}
var explode = function() {
$('.sub').trigger('click');
};
setTimeout(explode, 2000);
});
});
// Показываем список загруженных файлов
$('#uploaded-files').show();
return false;
});
// Простые стили для области перетаскивания
$('#drop-files').on('dragenter', function() {
$(this).css({
'box-shadow': 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)',
'border': '4px dashed #bb2b2b'