umnik90
8.03.2011 - 18:37
Задача при загрузке картинок сразу показывать превьюшку.
Т.е. добавили в поле файла - появилась. Как в письмах на mail.ru
Есть идеи, как реализовать? может кто-то где-то видел подобное
буду очень признателен
m4a1fox
10.03.2011 - 03:02
umnik90
Кстати.... это очень интересная тема... Если логически, то думаю, там реализовано так. Грузится файл. Некий плагин его на лету цепляет, еще перед загрузкой, сканит (ну может цвета в пикселях) и выводит...
valerik88
23.03.2011 - 21:46
Да интересно.. попытался сделать
<html>
<head>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="start.js"></script>
</head>
<body>
<input type="file" id="f1" accept="image/*"/>
<div id="res">Тут будет картинка</div>
</body>
</html>
start.js
$(function() {
$('#f1').change( function (){
var src=$('#'+this.id).val();
alert(src);
$('#res').html("<img src='"+src+"' alt='' />");
});
});Как оказалось, браузер не выдаёт нам реальный путь до файла =)
Вместо реального адреса картинки, выдаёт C:\fakepath\3.jpg
Подозреваю, что тут нужно задействовать flash
sharki
23.03.2011 - 21:55
umnik90
Скорее всего это flash, но думаю и на JS (ajax) можно такое реализовать
valerik88
23.03.2011 - 21:59
function onChangeImagefile()
{
var imagefile = document.getElementById('imagefile');
var image = document.getElementById('preview');
if(typeof(FileReader)!='undefined')
{
var reader = new FileReader();
reader.onload = function(e){
image.src = e.target.result;
}
reader.readAsDataURL(imagefile.files.item(0));
}
else if(imagefile.files && imagefile.files.item(0).getAsDataURL)
{
image.src = imagefile.files.item(0).getAsDataURL();
}
else
{
}
}
Нашёл в инете такое решение (в firefox пашет, в опере нет)
inpost
23.03.2011 - 22:13
umnik90По аяксу можно сразу грузить картинку на сервер, я сам ещё не пробовал, но недавно про это читал. То есть ты выбрал картинку - она сразу же загрузилась на сервер во временную папку, после "сохранить" картинка перемещается уже в настоящую папку. Превьюшка показывается конкретно из временной папки, куда уже была загружена фотка.
_____________
Обучаю веб-программированию качественно и не дорого:
http://school-php.comФрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).
valerik88
23.03.2011 - 22:16
Это то не сложно.. Тут вопрос, как отобразить изображения до выгрузки его на сервер..
inpost
23.03.2011 - 22:27
valerik88Читай внимательно вопрос: "Т.е. добавили в поле файла - появилась. Как в письмах на mail.ru", где тут говорится про "до выгрузки его на сервер"? Не стоит от себя придумывать своих фраз. На майле как раз подгружается аяксом картинка и тут же отображается.
_____________
Обучаю веб-программированию качественно и не дорого:
http://school-php.comФрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).
kastaneda199
17.01.2013 - 12:40
| Цитата (valerik88 @ 23.03.2011 - 21:59) |
function onChangeImagefile()
{
var imagefile = document.getElementById('imagefile');
var image = document.getElementById('preview');
if(typeof(FileReader)!='undefined')
{
var reader = new FileReader();
reader.onload = function(e){
image.src = e.target.result;
}
reader.readAsDataURL(imagefile.files.item(0));
}
else if(imagefile.files && imagefile.files.item(0).getAsDataURL)
{
image.src = imagefile.files.item(0).getAsDataURL();
}
else
{
}
}
Нашёл в инете такое решение (в firefox пашет, в опере нет) |
а можно более подробнее - откуда берется imagefile и что это за тег html ? ну и по возможности сам html код
kastaneda199
17.01.2013 - 12:49
и как написать похожий код для IE ?
В общих чертах это делается следующим образом: В ифрейме или флешем грузим файл на сервер, который, если загрузка успешна (файл успешно прошел все фильтры и валидаторы) отдает путь до этой картинки. клиент создает новый элемент img c атрибутом src то что пришло от сервера. Для jquery есть плагин ajax file upload кажется, который реализует это
kastaneda199
17.01.2013 - 14:05
этот плагин в IE не работает
kastaneda199
17.01.2013 - 14:32
и как написать чтобы на ранних версиях IE и firefox работало ?
мы писали на ие7 работало.
делаешь иффрайм. делаешь форму в неё только один инпут файл, если в onchange сабмит формы, сразу обрабатываешь ресайзишь и возвращает ссылку на картинку) это в 2 словах)
Быстрый ответ:
Powered by dgreen
Здесь расположена полная версия этой страницы.