загрузка данных без перезагрузки страницы
Штинов Антон
Хочу попытаться обратится к данным, которые загружены в фрейм, но где-то
грабли, а где понять не могу.
В фрем грузится следующее:
<html><body><div id="picture"
style="display:none;">hello</div></body></html>
Потом пытаюсь сделать данные в фрейме видимые:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Document</title>
<script language="JavaScript">
function copypic() {
// ни один из этих вариантов не работает
window.frames['upload'].document.getElementById("picture").style.display
= "block";
//window.all.upload.picture.style.display = "block";
//window.upload.picture.style.display = "block";
setTimeout('copypic()',1000);
}
</script>
</head>
<body>
<form action="upload.php" name="uploadForm" method="post" target="upload"
enctype="multipart/form-data"
onsubmit="upload();">
<input type="file" name="userfile" />
<input type="submit" value="Загрузить" onClick="copypic();"/>
</form>
<iframe id="upload" name="upload"></iframe>
</body>
</html>
--
Штинов Антон
E-mail: del...@gmail.com
mad_witcher
доволі таки поширена байда). Я у свій час картинку грузив аяксовським
callback-ом :Р
Штинов Антон
You wrote on Tue, 24 Mar 2009 17:13:53 +0000 (UTC):
mw> Думаю, гугл має вирішити проблему (загрузка картинки без
mw> перезавантаження доволі таки поширена байда). Я у свій час картинку
mw> грузив аяксовським callback-ом :Р
Решений с аяксом и JQuery в инете полно. а меня интересует простой способ с
использованием только ява скриптов. В инете много чего перерыл. Суть везде
одна: загрузить данные в фреим, а потом их использовать. Вот главная
проблема, что у меня не получается получить данные из фрейма ((
URFIN
А вообще то, что вам нужно, делается без ифреймов - просто див-блок.
--
С уважением,
Александр
Штинов Антон
You wrote on Tue, 24 Mar 2009 18:54:50 +0000 (UTC):
U> document.getElementById('upload').contentWindow.document.getElementById(
U> 'picture').style.display='block';
U> А вообще то, что вам нужно, делается без ифреймов - просто див-блок.
А можно подробнее? Смысл то в том, что мне надо загрузить картинку на сайт,
и отобразить ее на той же странице без перезагрузки.
Я пока сделал так:
<form action="upload.php" name="uploadForm" method="post" target="upload"
enctype="multipart/form-data"
onsubmit="upload();">
<input type="file" name="userfile" />
<input type="submit" value="Загрузить" />
</form>
<img id="picture" width="50" height="50" src="" />
<iframe id="upload" name="upload" style="display:none"></iframe>
по сабмиту формы в фрейм грузится ява скрипт, который меняет src картинки,
на тот путь, куда собственно картинка закачана.
URFIN
> enctype="multipart/form-data"
> onsubmit="upload();">
> <input type="file" name="userfile" />
> <input type="submit" value="Загрузить" />
> </form>
> <img id="picture" width="50" height="50" src="" />
> <iframe id="upload" name="upload" style="display:none"></iframe>
То, что я вижу в этом коде, меняет вопрос. Если вы хотите, чтобы без
перезагрузки страницы загружался клиентский скрипт upload.php (судя по
приведенному коду, это так и есть), то здесь нужен только асинхронный
javascript, т.е. аджакс. По сути, используя iframe, вам придется тоже
сделать какое-то подобие аджакса, но это все будет похоже на изобретение
велосипеда. Гуглите запрос "ajax file upload php", очень вероятно, что
найдете что-то нормально работающее.
Общая суть работы будет такая: объект xmlhttprequest посылает на сервер
post-запрос (в нем адрес скрипта, картинка, может, чего-нить еще), , при
этом страница не перезагружается, а объект ждет, пока придет ответ (в это
время даже можно запустить клиентскую функцию - например, написать
"подождите"). Когда ответ приходит, объект xmlhttprequest может запустить
функцию на клиенте, какую вы ему укажете запустить. В этом ответе может быть
послан адрес вашей картинки (которая уже сохранена на сервере), вы этот
адрес без проблем сможете засунуть в див-блок.
--
С уважением,
Александр
Штинов Антон
You wrote on Tue, 24 Mar 2009 19:42:47 +0000 (UTC):
U> То, что я вижу в этом коде, меняет вопрос. Если вы хотите, чтобы без
U> перезагрузки страницы загружался клиентский скрипт upload.php
Картинка грузится на сервер, пока она грузится отображается load.gif
Потом после загрузки картинки на сервер в фрейм грузится скрипт, который
меняет
путь picture на путь к загруженой картинке, и скрывает load.gif
Таким образом не перегружая страницу сайта можно отобразить загруженый
рисунок.
И главное никаких аяксов и прочего, все довольно просто
вот код скрипта upload.php:
<?php
$uploaddir = 'upload/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile);
echo "<script>";
echo "top.document.getElementById('picture').src = '/".$uploadfile."';";
echo "top.document.getElementById('act').style.display = \"none\";";
echo "</script>";
?>
а вот и самой странички:
<form action="upload.php" name="uploadForm" method="post" target="upload"
enctype="multipart/form-data"
onsubmit="upload();">
<input type="file" name="userfile" />
<input type="submit" value="Загрузить"
onClick="document.getElementById('act').style.display = "block";"/>
</form>
<img id="picture" width="50" height="50" src="" />
<div id="act" style="display:none;"><img src="img/load.gif" /></div>
<iframe id="upload" name="upload" style="display:none"></iframe>
Malkin S.A.
> вот код скрипта upload.php:
> <?php
> $uploaddir = 'upload/';
> $uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
> move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile);
> echo "<script>";
> echo "top.document.getElementById('picture').src = '/".$uploadfile."';";
> echo "top.document.getElementById('act').style.display = \"none\";";
> echo "</script>";
> ?>
OMFG...Опять гавнокод детектед...
St@|_n!Y
получится писать отличных сценариев на JavaScript. Iframe - це подобия AJAX,
тоисть один из его видов. XMLHttpRequest не умеет закачивать файлы
асинхронно (видел однажды решение для FireFox, но там нужно кучу защити
обходить). Тоесть чтобы закачать картинку есть всего 2 варианта тег "IMG"
или Iframe. Чтобы закачивать файлы асинхронно (любые файлы) - только Iframe.
Если интересно - это все можна узнать если разобратся с библиотекой
JsHttpRequest.
Поповоду закачки, что-то типа:
на главной странице:
<form action="ajax.php" target="upload_img" method="post"
enctype="multipart/form-data">
<input name="file" type="file" onchange="this.form.submit()" />
<div id="upload_file"></div>
</form>
<iframe src="#" name="upload_img" style="display:none"></iframe>
ajax.php:
<?php
$upl=$_FILES['file'];
if(is_uploaded_file($upl['tmp_name'])&&!$upl['error'])
move_uploaded_file($upl['tmp_name'],$_SERVER['DOCUMENT_ROOT'].'/'.$upl['name']);
$path='/'.$upl['name'];
?>
<html>
<head>
<script type="text/javascript">
var div=parent.document.getElementById('upload_file');
div.innerHTML='<img src="<?=$path?>" />';
</script>
</head>
<body>
</body></html>
Типу такого
mad_witcher
"St@|_n!Y" <sta...@top7.ntu-kpi.kiev.ua> wrote in message
news:gqcofo$cs0$1...@news.ntu-kpi.kiev.ua...
> Дам совет: до тех пор пока Вы называете JavaScript яваскриптом, у Вас не
> получится писать отличных сценариев на JavaScript. Iframe - це подобия
> AJAX, тоисть один из его видов. XMLHttpRequest не умеет закачивать файлы
> асинхронно
І давно з вами таке? Як так не може? Релігія не дозволяє?
mad_witcher
God damn it, браузери перейшли на новий щабель еволюції ))
St@|_n!Y
"mad_witcher" <wid...@i.ua> сообщил/сообщила в новостях следующее:
news:gqcpsc$dln$1...@news.ntu-kpi.kiev.ua...
Таки да)) Просто мені подобається, коли людина в чомусь не шарить і дає
поради іншій людині. ИМХО
mad_witcher
> поради іншій людині. ИМХО
Таки да, зпутав. Приношу вибачення за наїзди. )