Предворительный показ добавленной картинки, перед отправкой на сервер

bgraf · April 15, 2013

Здравствуйте!

Подскажите можно ли, как-то показать картинку добавленную через type=file перед тем как отправить ее на сервер.

Теоретически я понимаю что нужно использовать onload, но как перехватить действие? С addEventListener не получается так как IE не поддерживает.

Подскажите как можно решить эту задачу.

Спасибо!

nerv · April 15, 2013

можно читать через filereader и дальше в канвасе миниатюру рисовать

Edited April 15, 2013 by nerv

SelenIT · April 16, 2013

С addEventListener не получается так как IE не поддерживает.

С доктайпом — поддерживает (7-я и еще более ископаемые версии не в счет). Вот канвас, да, начиная с 9-й версии появился... начиная с 9-й версии (спасибо alexriz за важное уточнение!).

lexxcode · April 16, 2013

С доктайпом — поддерживает (7-я и еще более ископаемые версии не в счет). Вот канвас, да, начиная с 9-й версии появился...

Стесняюсь спросить... А как это addEventListener можно заставить работать в IE8 с помощью доктайпа O_o??

SelenIT · April 16, 2013

Ого. Вот я лажанулся-то. До сих пор был абсолютно уверен, что IE8, избавившись от путаницы свойств с атрибутами и name с id, заодно и работу с событиями для стандартного режима нормализовал. Посыпаю голову пеплом. Эх, вот и меня jQuery испортила...

Николя223 · April 16, 2013

Вы посмотрите, сейчас есть хорошие плагины, для отправки форм и файлов с помощью jQuery и вроде бы AJAX( но что то мне подсказывает там ещё и i-frame замешан). Есть очень хорошие версии, которые как раз под это и разработаны. в них встроенная предзагрузка. погуглите)

Edited April 16, 2013 by Николя223

bgraf · April 16, 2013

Погуглил, все идет к тому, что кросбраузности с помощью js не добьюсь, jquary использовать не хочется, хотя понимаю что эти библиотеки становятся популярными, Ajax тоже тут не применим, вобщем смотрю примеры на других сайтах и понимаю что тем или иным способом делается перезагрузка страницы. Просто хочется реализовать таким образом чтобы пользователь нажал один раз submit и все разом отправил на сервер, но понимаю что так не получится

Edited April 16, 2013 by bgraf

Николя223 · April 16, 2013

jquery.form.js или ajaxupload.3.5.js погуглите, вроде какая то из них , ,без жуквери сложно

Edited April 16, 2013 by Николя223

Николя223 · April 16, 2013

смотрите как сделать:

Пользователь выбирает фотографию, на событие change (в jQuery) или onchange (JS) навешивайте отправку файла, через какой нибудь из тех плагинов

на php формируете имя файла, что нибудь уникальное. типа дамп времени + случайные числа,буквы к примеру, принимаете фото, обрабатываете и отправляете пользователю+ новое имя сохраняйте в переменную или в поле HIDDEN

причем нужно учесть, что если пользователь захочет изменить фото(клацает кнопку изменить), на CHANGE вешайте немного другой обработчик. отправка имени файла, и самого файла. сервер принимает имя, фото и по указанному имени сохраняет фото

либо, так же как в первом случае, но потом нужно избавляться от устаревших не привязанных файлов

upd. как то так, возможно лучшие варианты есть

Edited April 16, 2013 by Николя223

nerv · April 17, 2013

и понимаю что тем или иным способом делается перезагрузка страницы

вы ошибаетесь

bgraf · April 18, 2013

смотрите как сделать:
Пользователь выбирает фотографию, на событие change (в jQuery) или onchange (JS) навешивайте отправку файла, через какой нибудь из тех плагинов
на php формируете имя файла, что нибудь уникальное. типа дамп времени + случайные числа,буквы к примеру, принимаете фото, обрабатываете и отправляете пользователю+ новое имя сохраняйте в переменную или в поле HIDDEN
причем нужно учесть, что если пользователь захочет изменить фото(клацает кнопку изменить), на CHANGE вешайте немного другой обработчик. отправка имени файла, и самого файла. сервер принимает имя, фото и по указанному имени сохраняет фото
либо, так же как в первом случае, но потом нужно избавляться от устаревших не привязанных файлов
upd. как то так, возможно лучшие варианты есть

Николя223 спасибо Вам огромное

Всю эту логику я понимаю. Попробовал ajaxupload.3.5.js , все подключил запустил в Chrome, работает, запустил в IE 6 7 8 9 глючит, не открывает окно выбора файла. Ну решил потом покопаться. Начал менять файл перед загрузкой в tmp папку, и тут получил на сервере то что выбрал а на странице картинку пустую, как будто не нашлась картинка. Также при выводе на странице нового <img задаю width, так как полный размер не нужен, получаю именно полный размер, смотрю в код страницы а width и не пахнет. В общем наверно хороший плагин, но его переделывать надо, или может есть настройки какие то, попробовал почитать коменты в самом файле, ничего не нашел, стал искать объяснение к этому плагину в нете и често говоря ничего не нашел а может плохо искал. В общем как мог разобрал я этот плагин и понял что тут используется IFRANE значит можно самому написать эту штуку, вот только вопрос, есть какие-то примеры таких вещей?

Спасибо всем, кто уделяет мне время, очень признателен

Edited April 18, 2013 by bgraf

bgraf · April 19, 2013

подскажите, не могу понять, решил использовать iframe загрузку, все работает, но если при загрузке я меняю имя файла


$str_name_file = $_FILES['upload_photo']['name'];
    $new_file_name = "tmp_avatar_".$_SESSION['login_users_data'][0].strrchr($str_name_file,'.');
    $upload_photo = "../users_temp_images/".$new_file_name;

то при выборе другой картинки на сервер загружается и меняется уже существующая картинка с этим именем


copy($_FILES['upload_photo']['tmp_name'],$upload_photo)

а вот на страницу выходит прежняя картинка

загрузку делаю так


echo "<script type=\"text/javascript\">parent.document.getElementById(\"imageId\").innerHTML = '<img width=\"150\" src=\"".$upload_photo."\">'; parent.document.getElementById(\"image_upload_status\").innerHTML = '<p>Изображение успешно загружено</p>';</script>";

помогите разобраться пожалуйста

Николя223 · April 19, 2013

не вкурсе. может вы что то не в том порядке делаете. может работает кэш браузеров... попробуйте отправлять браузеру имя картинки так:

pretty-foto.jpg?

после вопроса какое нибудь рандомное число

думаю это кэш работает))) можете и по другому сделать - удаляете старое изображение, сохраняете новое и отправляете юзеру

bgraf · April 19, 2013

не вкурсе. может вы что то не в том порядке делаете. может работает кэш браузеров... попробуйте отправлять браузеру имя картинки так:
pretty-foto.jpg?
после вопроса какое нибудь рандомное число
думаю это кэш работает))) можете и по другому сделать - удаляете старое изображение, сохраняете новое и отправляете юзеру

Попробую, спасибо. Второй вариант и сделал, все работает. Спасибо Вам

bgraf · April 23, 2013

Подскажите, если я использую сессии для того чтобы запомнить имя файла и в случае окончания время сессии делаю такую проверку


if(!isset($_SESSION['login_users']))
{
echo "<script type=\"text/javascript\">
window.document.location.replace('http://www.my-site.ru/login.php');
</script>";
exit;
}

почему не работает переход на страницу?

вот весь код:

html


<div style="display:none;">
<iframe style="display: none;" name="reload_iframe" width="1" height="1"></iframe>
</div>
<form action="upload_img.php" method="post" name="img_upload" enctype="multipart/form-data" target="reload_iframe">
	 <div id="div_pre_imageId">
			 <img width="150" src="<?php echo($logo_photo);?>" alt="Логотип" title="Логотип" />
	 </div>
	 <div style="margin-top:20px;">
	 <input type="file" name="upload_photo" onchange="img_upload.submit();" />
</div>
</form>

php


session_start();
if(!isset($_SESSION['login_users']))
{
echo "<script type=\"text/javascript\">
window.document.location.replace('http://www.my-site.ru/login.php');
</script>";
exit;
}

Edited April 23, 2013 by bgraf

Николя223 · April 23, 2013

вы посмотрите, выводится ли вообще код при окончании сессии?

попробуйте просто написать скриптовой переход на страницу. работает ли? если нет, тогда просто используйте window.location="";

вообще - я не могу сходу сказать, тестить нужно (минут за 2 сказал бы что именно не правильно), но извините - лень... устал за сегодняшний день.

bgraf · April 23, 2013

вы посмотрите, выводится ли вообще код при окончании сессии?
попробуйте просто написать скриптовой переход на страницу. работает ли? если нет, тогда просто используйте window.location="";
вообще - я не могу сходу сказать, тестить нужно (минут за 2 сказал бы что именно не правильно), но извините - лень... устал за сегодняшний день.

Да пробовал все:


window.document.location.replace('http://www.my-site.ru');
header("Location: http://www.my-site.ru");

если убрать target="h_iframe" все работает, такое впечатление, что пересылка при исполнении кода в iframe вообще не работает

Николя223 · April 24, 2013

у меня о вас сперва другое впечатление сложилось))) вы не внимательно смотрите. если скрипт выводится в айфрейм, но не раюотает - значит вы его не правильно написали))) слэши в слове \"text/javascript\" уберите)) экранирование не нужно, браузер не понимает какой тип скрипта вы ему подсовываете

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

а вообще, если вы хотите изменить адрес айфрейма. можно сделать легко и просто из основного документа - подменяем атрибут src с помощью JS или jQ и всё)

Николя223 · April 24, 2013

хотя.. насчет header ов я ошибся. должны работать

bgraf · April 24, 2013

у меня о вас сперва другое впечатление сложилось))) вы не внимательно смотрите. если скрипт выводится в айфрейм, но не раюотает - значит вы его не правильно написали))) слэши в слове \"text/javascript\" уберите)) экранирование не нужно, браузер не понимает какой тип скрипта вы ему подсовываете
заголовки HEADER должны находится в самом верху документа
а вообще, если вы хотите изменить адрес айфрейма. можно сделать легко и просто из основного документа - подменяем атрибут src с помощью JS или jQ и всё)

Может конечно впечатление и другое, но скорее всего я просто не понимаю как работает данная конструкция.

к примеру, если я делаю так:


if(!isset($_SESSION['login_users_data']) || empty($_SESSION['login_users_data'][0]) || empty($_SESSION['login_users_data'][1]))
{
echo "<script type=\"text/javascript\">parent.document.getElementById(\"image_upload_status\").innerHTML = '<font class=\"text_font_site\">Не удается загрузить изображение </font>';</script>";
exit;
}

работает, причем замете с экранированием кавычек.

используя такой код, причем перед header нет вывода и пустых строк:


if(!isset($_SESSION['login_users_data']) || empty($_SESSION['login_users_data'][0]) || empty($_SESSION['login_users_data'][1]))
{
header("Location: http://www.my-site.ru/");
exit;
}

опять же не работает

а вообще, если вы хотите изменить адрес айфрейма. можно сделать легко и просто из основного документа - подменяем атрибут src с помощью JS или jQ и всё) - вот это не понял

Edited April 24, 2013 by bgraf

Николя223 · April 24, 2013

оба способа работают

ваш код должен работать следующим образом - если не существует переменной в сессии, тогда происходит выполнение кода. или ячейка в массиве login_users_data пуста, либо другая ячейка в login_users_data также пуста.

с сессиями давно не работал, но вроде как помню, когда в моем случае сессия переставала действовать, приходилось ещё и переменные удалять... возможно из за денвера. Честно - не знаю чем вам помочь

bgraf · April 24, 2013

Спасибо!!!!

Sign In

Предворительный показ добавленной картинки, перед отправкой на сервер

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information