Доброго времени суток. Недавно начал писать на PHP, поэтому прошу помидорами не закидывать. Проблема такая: на странице есть картинка (тэг <img src =...>) В ней хранится аватар пользователя. Предусмотрена кнопка загрузки на сайт нового аватара. При нажатии её новая картинка загружается на сайт, путь к ней сохраняется в БД MySQL. Это всё написано на PHP, всё работает, но вот как поменять картинку в уже отображенном на странице теге <img> я не знаю, хотелось бы это сделать без перезагрузки страницы. Ну и по возможности без использования JS и JQuery. Спасибо.
Хорошо, js так js. Мне нужно это сделать в блоке <?php> Код (Text): <?php if($_SESSION['id']) { $image =''; $id = $_SESSION['id']; $result = mysql_fetch_assoc(mysql_query("SELECT Photo FROM mb_details WHERE id = $id")); if($result['Photo']){ echo '<img id="avatar" src="'.$result['Photo'].'" class="UserPhoto" alt="Photo">'; } else{ echo '<img id="avatar" src="images/NoPhoto.png" class="UserPhoto" alt="Photo">'; } echo '<FORM ENCTYPE="multipart/form-data" ACTION="cabinet.php" METHOD=POST> <INPUT TYPE="file" STYLE="DISPLAY:none" NAME="userfile" > <input type=submit class="send" NAME="open" VALUE="Обзор..." onclick="userfile.click()"> <INPUT TYPE="submit" class="send" NAME="submit" VALUE="Загрузить"> </FORM>'; if(!empty($_FILES)){ $image_size=$_FILES['userfile']['size']; // Ограничение на размер файла, в моём случае 1Мб if($image_size>1024*1024||$image_size==0) { $ErrorDescription="Каждое изображение не должно привышать 1Мб!"; } else if(substr($_FILES['userfile']['type'], 0, 5)=='image') { $uploaddir = './avatars/'; $uploadfile = $uploaddir.basename($_FILES['userfile']['name']); // Копируем файл из каталога для временного хранения файлов: move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile); $id = $_SESSION['id']; mysql_query("UPDATE mb_details SET Photo = '$uploadfile' WHERE id = $id"); //Вот тут надо обновить картинку в тэге img } } } ?> Как в указанное место вставить код Js? Путь к файлу изображения находится в $uploadfile
пхп не связан с js где-то после загрузки картинки сделай подмену пути в src Код (Text): $('#avatar').attr('src', 'новый путь'); только это с подключением jQuery.
Спасибо, подключил JQuery, но так и не понял, как в указанное место (я там в коде написал "//Вот тут надо обновить картинку в тэге img") вставить этот (приведенный Вами код). Браузеру же надо дать понять, что это код Js, или я не прав?
надо. можно вставить js код КУДА УГОДНО. он не связан ни с чем. вставляется от в тегах <script> или в подключаемых js файлах.
Вот, как я вставил, но это не верно. Как я понял скрипт можно вставлять в html, а не в php. Моя задача, чтобы скрипт выполнился после команды php mysql_query("UPDATE mb_details SET Photo = '$uploadfile' WHERE id = $id"); Код (Text): <?php if($_SESSION['id']) { $image =''; $id = $_SESSION['id']; $result = mysql_fetch_assoc(mysql_query("SELECT Photo FROM mb_details WHERE id = $id")); if($result['Photo']){ echo '<img id="avatar" src="'.$result['Photo'].'" class="UserPhoto" alt="Photo">'; } else{ echo '<img id="avatar" src="images/NoPhoto.png" class="UserPhoto" alt="Photo">'; } echo '<FORM ENCTYPE="multipart/form-data" ACTION="cabinet.php" METHOD=POST> <INPUT TYPE="file" STYLE="DISPLAY:none" NAME="userfile" > <input type=submit class="send" NAME="open" VALUE="Обзор..." onclick="userfile.click()"> <INPUT TYPE="submit" class="send" NAME="submit" VALUE="Загрузить"> </FORM>'; if(!empty($_FILES)){ $image_size=$_FILES['userfile']['size']; // Ограничение на размер файла, в моём случае 1Мб if($image_size>1024*1024||$image_size==0) { $ErrorDescription="Каждое изображение не должно привышать 1Мб!"; } else if(substr($_FILES['userfile']['type'], 0, 5)=='image') { $uploaddir = './avatars/'; $uploadfile = $uploaddir.basename($_FILES['userfile']['name']); // Копируем файл из каталога для временного хранения файлов: move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile); $id = $_SESSION['id']; mysql_query("UPDATE mb_details SET Photo = '$uploadfile' WHERE id = $id"); <script type="text/javascript"> var afile = '<?php echo $uploadfile;?>'; $('#avatar').attr('src', afile); </script> } } } ?>
дело в том, что ты не понимаешь что делаешь =) пхп выполняется на сервере. Он подготавливает ТЕКСТ страницы. Текст страницы интерпретируется браузером, теги расковыриваются, скрипты исполняются. В браузере. А пхп - на сервере. Это раз. Два, если ты хочешь повесить обновление аватарки без перезагрузки страницы, то тебе сначала надо как-то загрузить файл без перезагрузки страницы, потом поменять его размер до нужного, без перезагрузки страницы, потом получить новое имя новой аватарки, а потом только писать тот код, что я сказал. Это два. =) Добро пожаловать в программисты!
На антресолях найдется, думаю. Добавлено спустя 35 секунд: если на антресолях пусто, то в программистах не задержаться, поди.
Спасибо, буду разбираться. На счет бубна это серьезное замечание . Вообще опыт программирования очень большой, на чем только не писал, но вот с web-технологиями столкнулся недавно. На счет перезагрузки страницы понял, понял так же, что Главное замечание, которое я не учел во всем этом. Вывод сделал такой: js здесь не нужен, нужно просто обновить страницу. Как ... буду искать. Добавлено спустя 29 минут: В общем вышел из положения перезагрузкой. Вот так: Код (Text): header("Location: cabinet.php"); Это вставил после Код (Text): mysql_query("UPDATE mb_details SET Photo = '$uploadfile' WHERE id = $id"); Получил желаемый результат. Всем спасибо! Особенно Igordata!!! Вот за это: Пока правда не очень разобрался в том, как же тогда работают события типа onclick в PHP.
Так вам igordata уже долго объясняет - никак! События типа onclick - клиентские! Их обрабатывает JavaScript, и, если нужно, посылает на сервер запросы при помощи технологии AJAX. Вообще, задача php - всего лишь сформировать вывод страницы. Как говорят, php рождён, чтобы умирать - имеется в виду, что как только вывод страницы сформирован, выполнение программы прекращается, и вывод передаётся к браузеру. Если такая ситуация не устраивает, ищите другие системы. В Node.JS это, к примеру, не так, насколько я читал. Но всё равно, клиент должен послать запрос к серверу, сервер сам не знает, что там какой клиент кликнул у себя в окне У меня ещё не было ни одного проекта, при том, что я пишу пока очень несложные заказы, где бы можно было обойтись только PHP, везде приходится использовать и JavaScript, и часто отправлять запросы AJAX
Понял, спасибо! Буду читать литературу, в начале так всегда, спотыкаешься из за незнания матчасти. Ещё один вопрос, если можно, не стал для этого новую тему заводить. Проблема в том, что я решил картинки сохранять как $id+расширение. Т.е. при загрузке новой картинки она сохраняется в виде 1.jpg или 1.png или 1.gif в зависимости от типа загружаемого файла. Вот тут столкнулся с тем, что браузер не обновляет картинку, если до этого старая была загружена с таким же расширением, помогает только кнопка обновить страницу. Сама картинка в папке avatar меняется, но название файла остается старое, поэтому, как мне кажется, браузер не прегружает её. Как быть? Добавлено спустя 3 минуты 52 секунды: На всякий случай вот новый код того же, что уже писал: Код (Text): <?php if($_SESSION['id']) { $image =''; $id = $_SESSION['id']; $result = mysql_fetch_assoc(mysql_query("SELECT Photo FROM mb_details WHERE id = $id")); if($result['Photo']){ echo '<img id="avatar" src="'.$result['Photo'].'" class="UserPhoto" alt="Photo">'; } else{ echo '<img id="avatar" src="images/NoPhoto.png" class="UserPhoto" alt="Photo">'; } echo '<FORM ENCTYPE="multipart/form-data" ACTION="cabinet.php" METHOD=POST> <INPUT TYPE="file" STYLE="DISPLAY:none" NAME="userfile" > <input type=submit class="send" NAME="open" VALUE="Обзор..." onclick="userfile.click()"> <INPUT TYPE="submit" class="send" NAME="submit" VALUE="Загрузить"> </FORM>'; if(!empty($_FILES)){ $image_size=$_FILES['userfile']['size']; $image_type=$_FILES['userfile']['type']; if ($image_type == 'image/jpeg') { $filename = $id.'.jpg'; } if ($image_type == 'image/gif') { $filename = $id.'.gif'; } if ($image_type == 'image/png') { $filename = $id.'.png'; } // Ограничение на размер файла, в моём случае 1Мб if($image_size>1024*1024||$image_size==0) { $ErrorDescription="Каждое изображение не должно привышать 1Мб!"; } else if(!empty($filename)) { $uploaddir = './avatars/'; $uploadfile = $uploaddir.basename($filename); // Копируем файл из каталога для временного хранения файлов: move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile); $id = $_SESSION['id']; mysql_query("UPDATE mb_details SET Photo = '$uploadfile' WHERE id = $id"); header("Location: cabinet.php"); } } } ?>
при сабмите формы собственно происходит переход по урлу формы. так что всё просто. вообще лучше делать проще. пхп по сути консольный до ужаса. он принимает входящий поток из STDIN, включая весь POST-запрос. Потом он просто выдает что-то в STDOUT и умирает. Поэтому в пхп никто не следит за утечками памяти, занятыми файловыми дескрипторами и т.п. - один хрен они через одну десятую секунды все освободятся. Но соотв. на пхп нельзя написать долгоиграющее приложение без вышеупомянутого бубна. Даже больше. По умолчанию любой скрипт, набравший процессорного времени на 30 секунд будет убит насильно. Меняется в конфиге, но и одна секунда для пхп это очень долгое исполнение и надо что-то чинить и менять если так бывает. допиши к ее урлу какойнить рандомный get-параметр типа /images/1.png?alalala=dkfjkejfkejf только имей в виду, что путь начинающийся без слеша - это относительно текущего положения. такие вещи лучше задавать от корня.
Спасибо! Познавательно! Но процесс, точнее трэд в нем всё равно должен быть уникален, я так понимаю за этим следит сам вэб-сервер, точнее php-процессор, установленный на нем. В общем буду знать. А это к сожалению не помогает :-(. Более того, выяснилось,вся эта ... ну в общем мой код работает только в IE. Ни мозила ни хром вообще картинки не грузят, в смысле в папке avatars они не обновляются. Вот теперь займусь этим расследованием, но это уже оффтоп. А на счет get-параметра, разве он будет работать в свойстве src? Ну типа: Код (Text): echo '<img id="avatar" src="'.$result['Photo'].'?alalala=dkfjkejfkejf" class="UserPhoto" alt="Photo">';
Ну да, ключевое слово рандомный (ранее сказанное), спасибо! извиняюсь, что сомневался. Просто интуиция подводит, здесь я действительно новичок.
Блин а если я получаю сгенерированную картинку в PHP и ее нету на сервере она отправляется сразу клиенту , как ее вывести в браузер? (динамически подгружаю капчу - ReCaptch) Добавлено спустя 4 минуты 8 секунд: Оп, все я разобрался , нужно просто заного указывать путь на генератор капчи в SRC.