Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.06.2011, 17:46
Аватар для alexkill
Новичок на форуме
Отправить личное сообщение для alexkill Посмотреть профиль Найти все сообщения от alexkill
 
Регистрация: 19.05.2011
Сообщений: 7

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

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

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

Буду признателен за советы, ссылки.
Ответить с цитированием
  #2 (permalink)  
Старый 12.06.2011, 19:47
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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

habrahabr
Ответить с цитированием
  #3 (permalink)  
Старый 12.06.2011, 20:26
Аватар для alexkill
Новичок на форуме
Отправить личное сообщение для alexkill Посмотреть профиль Найти все сообщения от alexkill
 
Регистрация: 19.05.2011
Сообщений: 7

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>


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

пример по ссылке, я так понял, использует кучу дополнительных апи, мб как-то проще сделать можно?
Ответить с цитированием
  #4 (permalink)  
Старый 12.06.2011, 20:38
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

ога.

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

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

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

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

работает php :

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

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

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


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

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


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

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

мне это так представляется
Ответить с цитированием
  #5 (permalink)  
Старый 13.06.2011, 11:17
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Необязательно всю форму во фрейм кидать. Можно поставить заранее спрятанный фрейм, а в акшене у формы указать ИД фрейма. Как то так:
<form action="#uploader" method="POST">
   <input type="file" name="file" />
   <input type="submit" />
</form>
<iframe name="uploader" id="uploader" style="display: none;"></iframe>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #6 (permalink)  
Старый 13.06.2011, 11:45
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

а , точно

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

тогда и множественная загрузка легче делается
Ответить с цитированием
  #7 (permalink)  
Старый 13.06.2011, 19:41
Аватар для alexkill
Новичок на форуме
Отправить личное сообщение для alexkill Посмотреть профиль Найти все сообщения от alexkill
 
Регистрация: 19.05.2011
Сообщений: 7

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

<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>

Последний раз редактировалось alexkill, 13.06.2011 в 19:44.
Ответить с цитированием
  #8 (permalink)  
Старый 13.06.2011, 20:53
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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


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

посмотрите) как через аякс их грузить, мало умельцев. я пока этой темы не касался
Ответить с цитированием
  #9 (permalink)  
Старый 14.06.2011, 22:40
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

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>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как можно сделать подгрузку и смену изображения без перезагрузки страницы с другого Евгений Болгов jQuery 11 21.10.2010 18:18
Изменение содержания страницы без полной перезагрузки самой страни gelo Events/DOM/Window 7 29.08.2010 02:03
Подскажите как в VLC плеере переключать канал без перезагрузки страницы? mff Events/DOM/Window 0 10.05.2010 17:28
Как сделать смену картинки, типа "до" и "после", без перезагрузки страницы? btstudio Events/DOM/Window 2 23.02.2009 20:43
Автообновление <div> без перезагрузки страницы Antihrist AJAX и COMET 14 28.07.2008 06:06