Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Элемент формы для загрузки файла, в виде картинки

Автор: nicka47 5.10.2007, 21:10

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

Код

<input type="file" name="textfield" />

а чтобы на странице сидела просто изображение, при нажатии на которое открывается окно для выбора файла (Browse ).

ВОзможно ли такое вообще, и как именно

Автор: cruelangel 5.10.2007, 21:36

сделать инпут прозрачным и подложить под него картинку

Автор: nicka47 5.10.2007, 22:28

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

ПРозрачным - это значит невидимым? style="visibility:hidden" ?

Автор: cruelangel 5.10.2007, 22:44

нет, opacity:0 и фильтр для ИЕ с аналогичным действие.

Автор: nicka47 6.10.2007, 00:43

а что такое фильтр для ИЕ ?

если не трудно поподробнее, не понимаю что делать smile

Автор: Loengreen 6.10.2007, 02:12

Код


<img src='button.gif' alt='' />
<input type="file" style="width: 0; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; margin-top: -20px;">

Будет примерно так.

---
Указав ширину input 0, ты получишь минимальный input и кнопку. Задав прозрачность (код выше работает для IE, FF, Opera) 0, ты сделаешь стандартную кнопку при input-е невидимой. margin-ом или чем-либо другим накладываешь "невидимку" на изображение кнопки и все готово.

Задавать для img "cursor: pointer;" бесполезно - у кнопки input-a он все равно default... Хотя можно попробовать поменять курсор для input-a... но это вряд ли получится.

Автор: Alix 6.10.2007, 09:19

Нет, img все равно ловил нажатие на себя, а не на input. У меня получилось добиться желаемого сделав картинку фоном. Я использовал div, но можно и td.

Код

<div style="background: url('/themes/officexp/imgs/note_c.gif') right top no-repeat; width: 200px;">
<input type="file" style="opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0;">
</div>

Автор: nicka47 8.10.2007, 15:58

хорошо, но как сделать чтобы после того как файл выбран форма пошла на сабмит?

Автор: cruelangel 8.10.2007, 16:14

под "подложить картинку" я и подразумевал "положить фоном" smile

всё, что не относится к контенту страницы идеологически верно вставлять как фон.

> хорошо, но как сделать чтобы после того как файл выбран форма пошла на сабмит?

у формы есть метод submit

Автор: nicka47 8.10.2007, 22:46

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

Автор: Alix 8.10.2007, 22:55

На выбор: у input ловить onchange, быть может onclick или что там еще есть. Или, быть может, это и невозможно... Поле type=file оно такое... особое...