• Cannot read property 'push' of undefined TypeError... Что не так?

    @lis1us Автор вопроса
    Антон Измайлов он ругается на jQuery.event.props.push('dataTransfer');
    А вообще, вот код
    $(document).ready(function() {
    	// В dataTransfer помещаются изображения которые перетащили в область div
    	jQuery.event.props.push('dataTransfer');
    	
    	// Максимальное количество загружаемых изображений за одни раз
    	var maxFiles = 6;
    	
    	// Оповещение по умолчанию
    	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+' изображений!'); 
    			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();
    		
    		// Для каждого файла
    		$.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; }
    			
    			// Создаем новый экземпляра 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; } 
    		// Оповещения о загруженных файлах
    		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="background: url('+dataArray[i].value+'); background-size: cover;"> <a href="#" id="drop-'+i+'" class="drop-button">Удалить изображение</a></div>'); 
    			}
    		}
    		return false;
    	}
    	
    	// Функция удаления всех изображений
    	function restartFiles() {
    	
    		// Установим бар загрузки в значение по умолчанию
    		$('#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);
    		// Удаляем старые эскизы
    		$('#dropped-files > .image').remove();
    		// Обновляем эскизи в соответсвии с обновленным массивом
    		addImage(-1);		
    	});
    	
    	// Удалить все изображения кнопка 
    	$('#dropped-files #upload-button .delete').click(restartFiles);
    	
    	// Загрузка изображений на сервер
    	$('#upload-button .upload').click(function() {
    		
    		// Показываем прогресс бар
    		$("#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);
    				}
    				
    				// Формируем в виде списка все загруженные изображения
    				// 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>');
    				}
    				
    			});
    		});
    		// Показываем список загруженных файлов
    		$('#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'});
    		return false;
    	});
    	
    	$('#drop-files').on('drop', function() {
    		$(this).css({'box-shadow' : 'none', 'border' : '4px dashed rgba(0,0,0,0.2)'});
    		return false;
    	});
    });
    Ответ написан
  • Какой библиотекой пользуетесь для реализации бокового меню?

    Использую css-framework: materializecss.com
    Ответ написан
    Комментировать