Приветствую вас друзья! Очень нужна ваша помощь! Я собрал файловый загрузчик из нескольких разных загрузчиков под свои нужды. Вот его код:
$(document).ready(function() {
var dropZone = $('#dropZone');
var inputFile = $('#uploadInput');
var uploadForm = $('#uploadForm');
var dataArray = [];
maxFileSize = 1024*1024; // максимальный размер файла - 1 мб.
maxFiles = 0;
allowedTypes = 'image/*';
extFilter = 'jpg;png;';
if (typeof(window.FileReader) == 'undefined') {
dropZone.text('Не поддерживается браузером!');
dropZone.addClass('error');
}
dropZone[0].ondragover = function() {
dropZone.addClass('hover');
return false;
};
dropZone[0].ondragleave = function() {
dropZone.removeClass('hover');
return false;
};
dropZone[0].ondrop = function(event) {
event.preventDefault();
dropZone.removeClass('hover');
dropZone.addClass('drop');
var files = event.dataTransfer.files;
checkFiles(files);
};
inputFile.on('change', function() {
var files = $(this)[0].files;
checkFiles(files);
$(this).val('');
});
function checkFiles(files) {
for (var i= 0; i < files.length; i++) {
var file = files[i];
// Check file size
if((maxFileSize > 0) && (file.size > maxFileSize)) {
dropZone.text('Файл слишком большой!');
dropZone.removeClass('drop');
dropZone.addClass('error');
return false;
}
// Check file type
if((allowedTypes != '*') && (!file.type.match(allowedTypes))) {
dropZone.text('Этот тип файла нельзя загружать!');
dropZone.removeClass('drop');
dropZone.addClass('error');
return false;
}
// Check file extension
if(extFilter != null) {
var extList = extFilter.toLowerCase().split(';');
var ext = file.name.toLowerCase().split('.').pop();
if($.inArray(ext, extList) < 0){
dropZone.text('Файл с этим расширением нельзя загружать!');
dropZone.removeClass('drop');
dropZone.addClass('error');
return false;
}
}
// Check max files
if ((maxFiles > 0) && (files.length > maxFiles)) {
dropZone.text('Можно загружать файлов не более: ' + maxFiles);
dropZone.removeClass('drop');
dropZone.addClass('error');
return false;
}
// Создаем новый экземпляра FileReader
var fileReader = new FileReader();
// Инициируем функцию FileReader
fileReader.onload = (function(file) {
return function() {
// Помещаем URI изображения в массив
dataArray.push({name: file.name,
value: this.result,
cloth: "<?php echo $clothData ?>",
product: null});
loadPreview((dataArray.length-1));
};
})(files[i]);
// Производим чтение картинки по URI
fileReader.readAsDataURL(file);
}
}
function loadPreview(index) {
uploadForm.show();
if (index < 0 ) {
start = 0; end = dataArray.length;
} else {
// иначе только определенное изображение
start = index; end = index+1; }
if(dataArray.length == 0) {
// Если пустой массив скрываем кнопки и всю область
uploadForm.hide();
}
for (i = start; i < end; i++) {
$('#uploadList').append(
'<div id="item-'+i+'" class="col-sm-6 col-md-3 uploadItem">' +
'<div class="thumbnail">' +
'<img src="'+dataArray[i].value+'" alt="...">' +
'<div class="caption">' +
<?php function view_cat ($dataset) { ?>
<?php foreach ($dataset as $menu) {
if (!isset($menu['childs']) && $menu['class'] == 'type') {?>
'<option style="margin-left: 10px" value="<?php
echo $menu['id'].'_'.$menu['parent_id'].'_'.$menu['subclass'];?>"><?php
echo $menu['title'];?></option>' +
<?php }
if (!isset($menu['childs']) && $menu['class'] != 'type') { ?>
'<option style="margin: 5px 0" value="<?php
echo $menu['id'].'_'.$menu['parent_id'].'_'.$menu['class'];?>"><?php
echo $menu['title'];?></option>' +
<?php }
if(isset($menu['childs'])) { ?>
'<option style="font-weight: bold;" disabled><?php echo $menu['title'];?></option>' +
<?php view_cat($menu['childs']); } } }?>
'<p><select id="selectProduct-'+i+'" name="cloth_group" class="form-control" required>' +
'<option value="">Выберите товар</option>' +
<?php view_cat($catalogData);?>
'</select></p>' +
'<a href="#" id="deleteItem-'+i+'" class="btn btn-default" role="button">Удалить</a>' +
'</div>' +
'</div>' +
'</div>');
}
return false;
}
// Функция удаления всех изображений
function deletePreview() {
$('.progress-bar').css({'width' : '0%'});
$('.load-container').hide();
$('.uploadItem').remove();
$(uploadForm).hide();
// Очищаем массив
dataArray.length = 0;
return false;
}
$('.delete').click(deletePreview);
// Удаление только выбранного изображения
$("#uploadList").on("click","a[id^='deleteItem']", function(e) {
e.preventDefault();
// получаем название id
var delItem = $(this).attr('id');
// создаем массив для разделенных строк
var temp = new Array();
// делим строку id на 2 части
temp = delItem.split('-');
// получаем значение после тире тоесть индекс изображения в массиве
dataArray.splice(temp[1],1);
// Удаляем старые эскизы
$('.uploadItem').remove();
// Обновляем эскизи в соответсвии с обновленным массивом
loadPreview(-1);
});
// Загрузка изображений на сервер
.............. ТУТ AJAX ЗАПРОС НЕ ВЛЕЗ(((
});
Всё дело в том что большая часть кода меняться не будет, только некоторая его часть изменится:
$('#uploadList').append(
'<div id="item-'+i+'" class="col-sm-6 col-md-3 uploadItem">' +
'<div class="thumbnail">' +
'<img src="'+dataArray[i].value+'" alt="...">' +
'<div class="caption">' +
<?php function view_cat ($dataset) { ?>
<?php foreach ($dataset as $menu) {
if (!isset($menu['childs']) && $menu['class'] == 'type') {?>
'<option style="margin-left: 10px" value="<?php
echo $menu['id'].'_'.$menu['parent_id'].'_'.$menu['subclass'];?>"><?php
echo $menu['title'];?></option>' +
<?php }
if (!isset($menu['childs']) && $menu['class'] != 'type') { ?>
'<option style="margin: 5px 0" value="<?php
echo $menu['id'].'_'.$menu['parent_id'].'_'.$menu['class'];?>"><?php
echo $menu['title'];?></option>' +
<?php }
if(isset($menu['childs'])) { ?>
'<option style="font-weight: bold;" disabled><?php echo $menu['title'];?></option>' +
<?php view_cat($menu['childs']); } } }?>
'<p><select id="selectProduct-'+i+'" name="cloth_group" class="form-control" required>' +
'<option value="">Выберите товар</option>' +
<?php view_cat($catalogData);?>
'</select></p>' +
'<a href="#" id="deleteItem-'+i+'" class="btn btn-default" role="button">Удалить</a>' +
'</div>' +
'</div>' +
'</div>');
Это относится к зоне предпросмотра изображений, под каждой картинкой есть список select, для выбора их категории. Но если мне надо заменить select на input на других страницах, приходится копировать весь код и переписывать эту часть.
Помогите пожалуйста разбить код так, чтобы вывести эту изменяемую часть отдельно от остального кода, который будет как основа и находиться среди плагинов, а эту часть буду вставлять на нужную страницу и изменять по необходимости теги внутри неё. Заранее благодарю за помощь!
