Preview image на стороне клиента

 
0
 
JavaScript
ava
Ghirik | 22.07.2007, 22:40
Здравствуйте Уважаемые.

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


<html>
<head>
<script language="JavaScript">
d=document
function v(f){
i=f.id;c=/f/;c=i.replace(c, "i") // замена префикса "f" (id-input) на префикс "i" (id-img)
d.images[c].src=f.value
}
</script>
</head>
<body>
<img id=i1>
<form method=post name=upFpotoFileForm enctype=multipart/form-data action=#>
<input id=f1 type=file onchange="v(this);"><br>
<input type=Submit name=upForm value=Save>
</form>
</body>
</html>


Но, просмотр работает только в IE. Есть ли способы заставить Mozilla и Opera видеть изображения на стороне клиента, с локального пути (может какие префиксы нужны... указывающие, что путь локальный, или задать свойства объекта...)?
И самое главное, возможно ли, чтобы при выборе изображения для загрузки, оно (изображение) вначале грузилось в оперативку (кэш или ещё куда… временный файл…) а потом отправлялось на сервер из оперативной памяти или временного файла? Подойдут любые способы, главное, чтобы использовались средства активные по умолчанию в современных браузерах.

С большим нетерпением жду вашего вердикта…
Comments (4)
ava
Alik_Kirillovich | 22.07.2007, 22:57 #
В Опере, похоже, вообще ничего не получится, т.к. для <input type = "file"> свойство value возвращает только имя файла, без его пути. Т.е. если мы в Опере выбрали файл C:\Folder\image1.jpg, то свойство value вернет только image1.jpg. Хотя, я не знаю, может быть есть способ это обойти...

В FireFox'е для указания локального пути надо использовать префикс "file://"


d.images[c].src = "file://"+ f.value;


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

Итак, резюмирую:
  • В IE код будет работать без изменений, но только локально.
  • В FireFoxe надо добавить префикс file://, но все равно будет работать только локально.
  • В Опере, видимо, вообще не будет работать
Вот такой пессимистический вердикт...
ava
Ghirik | 23.07.2007, 07:32 #
Спасибо за подробный ответ.
Попробую заставить Мозиллу работать...
Потом расскажу что получилось.

ava
Ghirik | 09.08.2007, 00:46 #
Всем привет.

Собственно, плюнул я на борьбу с Мозиллой, не хочет он Preview-ить. А раз так, решил загружать изображения на сервер по событию "onchange" в "input type=file". Это всё работает, скоро выложу.
Но вот столкнулся ещё с несколькими проблемами в этом же проекте, думаю, лучше в этой теме и задать вопросы.
1. Не могу сладить с "textarea", вернее с переводом строк и табами. С табами через ж. справился(кроме Оперы), а с переводом строк - никак....
Есть такой код:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript">
<!--

function k_t(p,x,k,j){
if(x.value.length>j)
x.value=x.value.substring(0,j)
else
k.value=j-x.value.length
p.firstChild.nodeValue=x.value}

function up(e,a){
if(e.keyCode==9){
a.value=a.value+'\t'
e.returnValue=false}}

//-->
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<b><font><p id=p1>Enter the text</p></font></b>
</td>
</tr>
<tr>
<td>
<textarea rows=9 id=x1 cols=61 onkeydown=up(event,this) OnKeyUp=k_t(p1,this,k1,1600) onblur=this.focus()></textarea>
<input readonly type=text id=k1 size=3 maxlength=4 value=1600 onfocus=x1.focus()>
</td>
</tr>
</table>
</body>
</html>



Есть ли способ загнать в "value" переводы строк? Хотелось бы обойтись без "iframe", используя тэги 'p' или 'div' или ещё чего...

2. По поводу Оперы. Таб ставится, но курсор остается на месте, не переходит в конец строки. Можно как нибудь заставить? Вообще, можно ли двигать курсор в "textarea"? Думаю можно через "select()", если бы знать, как после снять выделение. Курсор тогда должен остаться в конце выделения... Наверное... smile

Простите за ужасное написание скрипта... Последствия социализма, жалко буквы... smile

ava
Ghirik | 11.08.2007, 02:28 #
Наверное как то не так вопросы задал... Но я только месяц пробую писать в JavaScript, многое не понимаю. Может меня вообще не туда повело? Подскажите...
Мне самому не нравится так "фокусничать" (я про onfocus), но иначе не получается.

Ещё есть вопрос, может на него кто ответит...
Есть ли у Мозиллы событие похожее на propertychange(IE)? Если нет, то как в Мозилле отследить изменения значений стиля?


Наверное, неправильно делаю, задавая все вопросы в одной ветке. Но не открывать же тему по пустякам.

Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
advanced
Submit