Загрузка/отображение картинки без перезагрузки страницы (AJAX, jquery)

[alexkill]

Задача: без перезагрузки страницы нужно вывести на экран только что загруженную фотографию (не текст!).

Судя по комментариям в интеренте, рекомендуется использование iframe, однако вразумительного примера реализации я так и не нашел.

Примечание: использовать дополнительные компоненты нежелательно (всяческие существующие file-uploader'ы).

Буду признателен за советы, ссылки.

[melky]

немного не ясно.

аплоадер чтоли нужен?

habrahabr

[alexkill]

melky, есть форма отправки данных, состоящая из одного инпута и кнопки

<form method='post' action="#?w=550"  enctype='multipart/form-data'>
      <input type='file' name='image' maxlength='32'  />
      <br />
      <br />
      <input type='submit' value='Отправить' />
    </form>

выбираем картинку у себя на диске, нажимаем на кнопку "Отправить" - идет процесс загрузки, после которого должна отобразиться только что загруженная картинка на той же странице.

пример по ссылке, я так понял, использует кучу дополнительных апи, мб как-то проще сделать можно?

[melky]

ога.

ну, если это находится на своём же домене,то все просто

на странице форма, и скрипт.
форма находится во ФРЕЙМЕ.

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

потом (да хоть через JSONP) показывается, что все хорошо (это снизу)

работает php :

пример аплоада

в конце путь к файлу будет

"/path/to/file/".$_FILES["filename"]["name"]

пишем после фнукции перемещения файла это : (будет исполняться скрипт)

echo '<script>show_jpg( "/path/to/file/'.$_FILES["filename"]["name"].'" );</script>';

т.е. во фрейме будет выводиться скрипт,который будет исполняться

остается только описать функцию появления картинки (show_jpg()), которая и будет показывать картинку на сайте.

мне это так представляется

[walik]

Необязательно всю форму во фрейм кидать. Можно поставить заранее спрятанный фрейм, а в акшене у формы указать ИД фрейма. Как то так:

<form action="#uploader" method="POST">
   <input type="file" name="file" />
   <input type="submit" />
</form>
<iframe name="uploader" id="uploader" style="display: none;"></iframe>

[melky]

а , точно

про экшен забыл

тогда и множественная загрузка легче делается

[alexkill]

посмотрите, что "сотворил" я, направьте на путь истинный, ибо как вставить картинку во фрейм, я не понял немного

<script> 
function check(newer)
{
	params  = "#uploader"
	request = new ajaxRequest()
	request.open("POST", "upload.php", true)
	request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
	request.setRequestHeader("Content-length", params.length)
	request.setRequestHeader("Connection", "close")
	
	request.onreadystatechange = function()
	{
		if (this.readyState == 4)
		{
			if (this.status == 200)
			{
				if (this.responseText != null)
				{
					document.getElementById('uploader').style.display='inherit';
					<?php 
						if (isset($_FILES['image']['name']))
						{
 							$saveto = "lmt_image/ava.jpg";
							$dir = "lmt_image";
	
							if (!file_exists($dir)) 
							{
								$old = umask(0);
								mkdir($dir,0777);
								umask($old); 
							}
						move_uploaded_file($_FILES['image']['tmp_name'], $saveto);
						}
					?>
				}
				else alert("Ajax error: No data received")
			}
			else alert( "Ajax error: " + this.statusText)
		}
	}
	request.send(params)
}

function ajaxRequest()
{
	try
	{
		var request = new XMLHttpRequest()
	}
	catch(e1)
	{
		try
		{
			request = new ActiveXObject("Msxml2.XMLHTTP")
		}
		catch(e2)
		{
			try
			{
				request = new ActiveXObject("Microsoft.XMLHTTP")
			}
			catch(e3)
			{
				request = false
			}
		}
	}
	return request
}
</script>

<form action="#uploader" name="photo" enctype="multipart/form-data" onsubmit="check(this)" method="post">
  <input type="file" name="image" size="30" />
  <input type="submit" name="upload" value="Upload" />
</form>

<iframe name="uploader" id="uploader" style="display: none;"></iframe>

[melky]

я вспомнил. было уже на этом форуме про загрузку файлов через AJAX. но тогда я нагуглил и кинул парню ссылку, где всё разжёвано (кстати,проверял на локалхосте сам. работает)

http://easy4web.ru/?p=681

и там как раз через ифрейм.

посмотрите) как через аякс их грузить, мало умельцев. я пока этой темы не касался

[walik]

alexkill,
Бред какой то.
Элементарная загрузка файла на сервер используя Iframe (примерно так, точно не помню):

<form action="#uploader" method="POST" onsubmit="document.getElementById('uploader').onload = upload;">
<input type="file" name="file" />
<input type="submit" />
</form>

<iframe name="uploader" id="uploader" src="/uploader/"></iframe>
<script>
function upload() {
   // Тут уже получаешь содержимое iframe (ответ от сервера).
   // Загрузка файлов происходит по адресу /uploader/
}
</script>