777ufo777

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

Здравствуйте! помогите кому не трудно )) проблема такая есть скрипт он грузит изображения на сервер и путь к ним прописывает бд 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; }); });