помогите c java script

777ufo777 · 20 липня 2016

Здравствуйте! помогите кому не трудно )) проблема такая есть скрипт он грузит изображения на сервер и путь к ним прописывает бд mysql всё работает на технологией drag drop . Вот я решил прикрутить дополнительные записи к изображению с этим проблема он не грузит текст в бд вот код html

 <form enctype="multipart/form-data" >
			
        	<input type="file" id="uploadbtn" >
			<input type="text" id="ptext">
        </form>
	</div>
    <!-- Область предпросмотра -->
	<div id="uploaded-holder"> 
		<div id="dropped-files">
        	<!-- Кнопки загрузить и удалить, а также количество файлов -->
        	<div id="upload-button">
			
            	<center>
                	<span>0 Файлов</span>
					<a href="#" class="upload">Загрузить</a>
					<a href="#" class="delete">Удалить</a>
                    <!-- Прогресс бар загрузки -->
                	<div id="loading">
						<div id="loading-bar">
							<div class="loading-color"></div>
						</div>
						<div id="loading-content"></div>
					</div>
                </center>

вот php извлекает данные

$name = $_POST['name'];
$catalog = $_POST['catalog'];
$ptext = $_POST['ptext'];
//var_dump($ptext);

// Записываем данные изображения в БД
mysql_query ("INSERT INTO images (date,catalog,filename,text) VALUES (NOW(),'$catalog','$name','$ptext')");

и вот js проблема

var $ = jQuery.noConflict();

$(document).ready(function() {
	// В dataTransfer помещаются изображения которые перетащили в область div
	jQuery.event.props.push('dataTransfer');
	
	// Максимальное количество загружаемых изображений за одни раз
	var maxFiles = 6;
	
	// Оповещение по умолчанию
	var errMessage = 0;
	
	// Кнопка выбора файлов
	var defaultUploadBtn = $('#uploadbtn');
	
	// Массив для всех изображений
	var dataArray = [];
	
	var ptext = [];
	
	// Область информер о загруженных изображениях - скрыта
	$('#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;
	}
	
	// Удаление только выбранного изображения 
	$("a[id^='drop']").live('click', 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;
		var str = "";
		var newArray = [];
		var catalog = "";
		var ptext =  [];
		$('#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(':');
				// Организуем строку с именами каринок через запятую
				str = str + "," + dataSplit[0];				
				if (index == (dataArray.length-1)) {
					// Получаем каталог
					catalog = dataSplit[1];
					// Удаляем первую запятую
					str = str.substr(1);
					// Помещаем в новый массив
					
					newArray.push({name : str, catalog : catalog });
					dataArray.push({text : $("#ptext").val()});
					// передаем этот массив в инчерт пхп
					$.post('insert.php', newArray[0], function() {});	
				}
				
				if(dataSplit[2] == 'загружен успешно') {
					$('#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;
	});
});

WinterZlat · 21 липня 2016

А откуда обработчик формы получает нужные вам значения? Я вижу

mysql_query ("INSERT INTO images (date,catalog,filename,text) VALUES (NOW(),'$catalog','$name','$ptext')");

Это проходит запись в БД значений date,catalog,filename,text.

А вам еще нужно записать другие данные, например download_user_name, download_user_adress. Чтоб их записать нужен еще один запрос к БД, либо вставка этих данных в запрос уже имеющийся. В таком случае вам нужно добавить поля в форму и принимать их методом

$download_user_name = $_POST['download_user_name'];

Я вас правильно понял?)

777ufo777 · 21 липня 2016

А откуда обработчик формы получает нужные вам значения? Я вижу
mysql_query ("INSERT INTO images (date,catalog,filename,text) VALUES (NOW(),'$catalog','$name','$ptext')");
Это проходит запись в БД значений date,catalog,filename,text.

А вам еще нужно записать другие данные, например download_user_name, download_user_adress. Чтоб их записать нужен еще один запрос к БД, либо вставка этих данных в запрос уже имеющийся. В таком случае вам нужно добавить поля в форму и принимать их методом
$download_user_name = $_POST['download_user_name'];
Я вас правильно понял?)

не совсем mysql_query ("INSERT INTO images (date,catalog,filename) VALUES (NOW(),'$catalog','$name')"); так работает нормально, но когда дополнительный текст в поле кидаю, то там не грузит , хотя sql запрос в phpmyaadmin прошел успешно всё добавилось, fileriader с ним проблемы как мне кажется

WinterZlat · 22 липня 2016

Не пойму, где не грузит? В скрипте?

но когда дополнительный текст в поле кидаю, то там не грузит

В какое поле? Код можете показать? Если в БД запись проходит, а он ее все равно не выводит, значит надо посмотреть SELECT к базе.

Вхід

помогите c java script

Recommended Posts

777ufo777

Надіслати

Поділитися на інших сайтах

WinterZlat

Надіслати

Поділитися на інших сайтах

777ufo777

Надіслати

Поділитися на інших сайтах

WinterZlat

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Схожі публікації

[Поддержка]

JS Readmore Для Описания Категории

<script> срабатывает через раз

АДАПТИВНЫЙ ДИЗАЙН!! ВЕРСТКА

Как добавить JS к конкретному товару?

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

Important Information