Пытаюсь сделать загрузку и просмотр фото методом Ajax, на основе урока http://ruseller.com/lessons.php?id=370&rub=37 (т.к. я ещё новичок в этом деле) Вывод данных на странице: Код (PHP): <div id="upload" >Upload File</div><span id="status" ></span> <ul id="files" ></ul> Основной код отправки и получения данных: Код (PHP): <script type="text/javascript"> $(function(){ var btnUpload=$('#upload'); var status=$('#status'); new AjaxUpload(btnUpload, { action: 'upload-file.php', //Name of the file input box name: 'foto1', onSubmit: function(file, ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // check for valid file extension status.text('Формат изображения должен быть: .jpg или .gif или .png').addClass('text_c'); return false; } status.html('<img src="../image/712.GIF" alt="Загрузка...">'); }, onComplete: function(file, response){ //On completion clear the status status.html(''); //Add uploaded file to list if(response) {$('<li></li>').appendTo('#upload').html('<img src="'+response+'" alt="Фото №1">').addClass('text_c');} else{$('<li></li>').appendTo('#upload').text('Ошибка').addClass('text_c');} } }); }); </script> Код немного переделал, т.к. нужно получить от сервера 2 переменные PHP (fotobig и fotomini) $fotomini (содержит путь к миниатюре) заносится в пременную "response" из файла обработчика, обычным выводом echo $fotomini Но как передать значение второй переменной $fotobig из файла обработки upload-file.php на страницу вывода данных?
Без проблем: Код (PHP): $fotomini = 'mini'; $fotobig = 'big'; echo json_encode(array('fotobig'=>$fotobig,'fotomini' => $fotomini)); То, что отдаст функция - валидный javascript-объект. На стороне клиента, в функции, принимающей эту строку как, скажем, result, сделайте следующее: Код (Text): var obj = JSON.parse(result); Все. теперь вы можете обращаться через точку к переданным значениям. obj.fotobig и obj.fotomini Добавлено спустя 1 минуту 23 секунды: И да, "фото" в английском пишется через ph, а не через f. photomini, photobig Добавлено спустя 53 секунды: А еще лучше каждое новое слово в переменной начинать либо с символа подчеркивания, либо с большой буквы, как вам удобнее: photoMini photo_mini И то и то улучшает читабельность. В пыхе, вроде, в основном принят именно вариант с "_". Давно не читал стандарты оформления просто.
Если я сделаю ещё один "echo" в файле обработчике, то эта строка добавляется к строке, которая заносится в "response" функции вывода данных на страницу.
Я описал механизм. Как его встроить в ваш проект - сами решайте. Добавлено спустя 55 секунд: Естественно, туда добавится все, что отдал сервер. Просто все данные сгруппируйте в массив и отдайте как JSON.
Не работает var obj = JSON.parse(result); obj - пустой. Можно ли сделать, чтобы в файле обработки ответы сервера echo $fotomini; и echo $fotobig; передавались в разные переменные функции вывода результатов?
Значит в result у вас не JSON приходит, а что-то левое. Вот и пустой. Нет понятия "передача переменной". AJAX не связывается со скриптом и не работает с ним в связке. Он просто дергает сервер, как если бы вы сами зашли на страничку. И все, что сервер отдаст, то есть некий текст, принимает как результат запроса. С помощью JSON через этот текст можно передавать любые структуры. Иначе - никак. Не работает - курите отладку. Смотрите, что приходит в result, думайте, почему там не JSON, а каша.
А может быть из-за плагина, там есть строка responseType: false ? Если сделать значение true, то вообще ничего не работает! Может ли одновременно принимать json и html данные от сервера?
Что отдадите, то и примет. Сервер не отдает JSON, не отдает HTML, не отдает JavaScript. Сервер отдает текст. Что в нем написано, тем он и является. Если вы сгенерили и отдаете HTML и, на принимающей стороне используете его как HTML, то он будет работать как HTML. Если вы отдаете валидную JSON-строку, принимаете ее и обрабатываете как JSON, то это JSON. Если вы отдаете кашу из каких-то левых значений, к которым подмешана JSON-строка, и пытаетесь обработать просто как JSON, то парсер пошлет вас куда подальше. Хотите разграничить - оборачивайте ВСЕ в json. Не echo делайте чуть что, а присваивайте выбрасываемые значения определенным элементам массива. Типа $result['html'] = 'То, что ранее вы эхали для вброса HTML'; $result['fotobig'] = fotobig; И тд. А потом все это дело конвертите в JSON и отдаете клиенту. Там конвертите в объект и уже obj.html отдаете туда, куда раньше отдавали сам результат, а остальные поля разбираете на свои нужды.
В файле обработчика я добавил строку: Код (Text): echo json_encode(array('foto1_big' => $foto1_big,'foto1_mini' => $foto1_mini)); // передаём путь до фото (ответ сервера на ajax запрос) После получения данных Код (Text): onComplete: function(file, response){ //On completion clear the status status.html(''); //Add uploaded file to list alert (response); if(response) {$('#upload').html('<img src="../katalog/'+response+'" alt="Фото №1">').addClass('text_c');} else{$('#status').text('Ошибка').addClass('text_c');} } В alert (response) я получил от сервера: {"foto1_big":"foto\/0.06637700 1431459308.jpg","foto1_mini":"foto\/0.06372700 1431459308.jpg"} Почему добавились обратные слеши "\" в {"foto1_big":"foto\/0.06637700 1431459308.jpg","foto1_mini":"foto\/0.06372700 1431459308.jpg"} Как теперь вытащить значения "foto1_mini" и подставить вместо "response": Код (Text): $('#upload').html('<img src="../katalog/'+response+'" alt="Фото №1">').addClass('text_c');
Потому что так положено, это символы экранирования. У тебя там простые слеши изначально же? Вот их и прослэшило обратными. Код (Text): var obj = JSON.parse(response); $('#upload').html('<img src="../katalog/'+ obj.foto1_mini +'" alt="Фото №1">').addClass('text_c');
Есть ли разница в: Код (Text): var obj = JSON.parse(response); и Код (Text): var obj = jQuery.parseJSON(response);
Есть. 1) Первое работает нативно. Для второго нужна JQuery. 2) Первое может не работать во всяких ИЕ6, второе должно. Результат же они должны давать один и тот же по идее. Добавлено спустя 1 минуту 1 секунду: Вообще, у JSON.parse есть старая добрая альтернатива, которая, наверняка и юзается в JQuery для работы в старых браузерах: Код (Text): var obj = eval(response); Не очень безопасно, но работает везде.
Спасибо огромное, за помощь! Теперь возникла проблема. Как теперь данные "obj.foto1_mini" и "obj.foto1_big" (полученные от сервера) присвоить переменным PHP на странице, с ajax запросом. Дело в том, что моя страница с Ajax запросом это по сути большая форма html с кучей PHP кода. После добавления на неё ещё и PHP-код загрузки и обработки фото сервер не стал справляться с нагрузкой, т.к. эта же страница является обработчиком формы и весь PHP-код выполняется одновременно. Вот я и решил вынести загрузку и обработку фото на отдельную страницу методом Ajax, которая возвращает уже готовые пути к фото. Эти пути нужно вернуть обратно на страницу с формой и затем вместе со всей кучей данных занести в базу mysql Сами фото хранятся в папке.
Так, давай-ка попробуем разгрести кашу, которая у тебя сейчас в голове. На странице никаких пхп-переменных нет. И пхп у тебя в странице нет. Вот, держи: http://phpfaq.ru/na_tanke Читать с самого начала страницы, вдумчиво. Там же есть и абзац про "как передать переменную в php из js".
Спасибо за инфу, я это все понимаю, просто выразил свои мысли не совсем правильно. Как вариант, решения данной задачи я нашел только один - передать значения переменных JS в Value скрытых полей формы и потом вместе с другими POST данными отправить в базу. Пробовал так, что то не получилось (отрывок из JS): Код (Text): var puty_foto = jQuery.parseJSON(response); // разбираем полученные данные JSON от сервера if(puty_foto.foto1_mini) // если от сервера получены данные (вывод echo ""; в файле обработчике) {$('#upload').hide(); // прячем кнопку добавления файла $('#status').html('<img src="'+puty_foto.foto1_mini+'" alt="Фото №1">'); $('foto1_mini').val(puty_foto.foto1_mini); // заполняем поле name="foto1_mini" $('foto1_big').val(puty_foto.foto1_big);} // заполняем поле name="foto1_big" else{$('#status').text('Ошибка').addClass('text_z');}
Да, такое практикуют. Либо, коль уж вы все равно JS-ом отправляете инфу, просто допишите к POST-запросу при отправке нужные данные как для гета через амперсанд &. Там, где в JQuery у вас поле data в аяксе, просто добавьте к значению взятому Код (Text): +"&foto1_mini="+puty_foto.foto1_mini , насколько я понял ваши нужды. Где в кавычках у нас амперсанд и имя переменной, как она должна придти в POST и символ присвоения, а к ним плюсуем само значение. Да, POST и GET изнутри, внезапно, совершенно одинаковый синтаксис имеют.
Отлично, спасибо!!! Все наконец то заработало, как нужно! Единственное, что я пока не могу понять, как переменным автоматом давать имена в определенном порядке. Т.е. при запросе, кода в файле обработчике мы получаем пару JS переменных "puty_foto.foto1_mini" и "puty_foto.foto1_big" (путь до маленькой и большой фото): Код (Text): echo stripslashes (json_encode(array('foto1_big' => $foto1_big,'foto1_mini' => $foto1_mini))); // передаём необходимые данные методом JSON (ответ сервера на ajax запрос) При следующем обращении и загрузке другой фото нужно чтобы пути уже прописывались в другие переменные: Код (Text): echo stripslashes (json_encode(array('foto1_big' => $foto2_big,'foto1_mini' => $foto2_mini))); // передаём необходимые данные методом JSON (ответ сервера на ajax запрос) затем: Код (Text): echo stripslashes (json_encode(array('foto1_big' => $foto3_big,'foto1_mini' => $foto3_mini))); // передаём необходимые данные методом JSON (ответ сервера на ajax запрос) и так далее до 6-ти фото
Дык а что нужно делать для повторного использования кода? Сделать из него функцию: Код (Text): function send_Photo_Json($big, $mini){ echo stripslashes (json_encode(array($big => $big, $mini => $mini))); } И вызывай потом: Код (Text): send_Photo_Json($foto1_big,$foto1_mini); Кроме того, в JSON можно передать разом массив из 6 комплектов переменных и не париться.
В принципе, т.к. все имена переменным будут задаваться в скрытых полях, можно просто по очереди при каждом последующем запросе заносить пути к фото в поля, а уже полям задать нужные имена. Но как мне теперь занести данные в нужные поля формы? Т.е. если поля name="foto1_mini" и name="foto1_big" заполнены, то заполнять name="foto2_mini" и name="foto2_big" и т.д. Код (Text): <input type="text" name="foto1_mini" id="foto1_mini" value="<?php echo @htmlspecialchars( stripslashes($_POST['foto1_mini']) , ENT_QUOTES ) ?>"> <input type="text" name="foto2_mini" id="foto2_mini" value="<?php echo @htmlspecialchars( stripslashes($_POST['foto2_mini']) , ENT_QUOTES ) ?>"> <input type="text" name="foto1_big" id="foto1_big" value="<?php echo @htmlspecialchars( stripslashes($_POST['foto1_big']) , ENT_QUOTES ) ?>"> <input type="text" name="foto2_big" id="foto2_big" value="<?php echo @htmlspecialchars( stripslashes($_POST['foto2_big']) , ENT_QUOTES ) ?>"> Пробовал так, первая пара переменных заполняет все поля: Код (Text): if(puty_foto.foto_mini) // если от сервера получены данные (вывод echo ""; в файле обработчике) { $('#upload').hide(); // прячем кнопку добавления файла $('#status').html('<img src="'+puty_foto.foto_mini+'" alt="Фото №1">'); // передаём данные в скрытые поля формы if ($('#foto1_mini').val() === "") {$('#foto1_mini').val(puty_foto.foto_mini); $('#foto1_big').val(puty_foto.foto_big);} if ($('#foto2_mini').val() === "") {$('#foto2_mini').val(puty_foto.foto_mini); $('#foto2_big').val(puty_foto.foto_big);} } else{$('#status').text('Ошибка').addClass('text_z');} }
Так, слушай, не спеши. Поизучай этот вопрос и сам попробуй пока найти решение. Все здорово, но писать за тебя сервис мне не очень улыбается. Вот посиди, подумай. Поищи сам инфу. И вот если совсем не получится, тогда снова предлагай варианты и буду помогатьп по мере возможностей. Ты и так уже неплохо продвинулся и сам себе фору дал.
Вот видишь. Удаление тоже, думаю, сам осилишь. Тут главное начать и получить импульс, а дальше, если это вот, что называется, твое, то само попрет. Добавлено спустя 5 минут 19 секунд: Само программирование, любая разработка чего угодно - это решение проблем. Из раза в раз. Никогда ничего сходу не работает. А если работает, нужно дважды все перепроверить, потому что даже это может быть багом. Ты тратишь 10% времени на написание кода, а на отладку будешь тратить 90% времени. Это ок. Я вот щас пишу для себя спрайтовый движочек на JS. По ходу пьесы поднабрался опыта, стал видеть в коде архитектурные/дизайнерские косяки. Начал рефакторинг проводить и офигел от того, что некоторые фрагменты кода просто переставали работать как ранее. Не потому, что я что-то поломал, когда рефакторил, а потому, что, при внимательном анализе оказывалось, что они и не должны были работать изначально. И сам факт их правильной отработки - это уже баг. Потому что он обеспечивался не программистом, а условиями тестирования. Ряд факторов совпадал так, что оно работало. Равно как с обычными багами ряд факторов совпадает так, что что-то работать перестает. Даже такое бывает, как видишь.
Составляю скрипт по удалению полученных от сервера путей до фото и самих миниатюр фото. Хочу проверить все скрытые поля формы на заполненность, но почему то срабатывает когда один не пустой? Код (Text): if ($('#foto1_mini').val() != "" && $('#foto2_mini').val() != "") {alert ('не пустой');}