Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: input type="file"

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: как заменить на мою картинку?
Поиск в теме | Версия для печати
mataba
Отправлено: 30 Июля, 2010 - 19:37:10
Post Id


Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Июль 2008  
Откуда: Odessa


Помог: 0 раз(а)
собственно и вопрос как input type="file" дать отдельно 2 картинки одну на поле другую на кнопку определенного размера, не соответствующего стандартному без наложения изображения сверху)
Прикреплено изображение (Нажмите для увеличения)
001.jpg
 
 Top
SAD
Отправлено: 30 Июля, 2010 - 20:51:17
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)
никак, только наложение
 
 Top
mataba
Отправлено: 31 Июля, 2010 - 00:17:08
Post Id


Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Июль 2008  
Откуда: Odessa


Помог: 0 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. <style type="text/css">
  2.  
  3.        .file_input_textbox
  4. {
  5.         float: left;
  6.         background-image:url(pole.png);
  7.         background-repeat:no-repeat;
  8.         width:343px;
  9.         height:50px;
  10.         border:0;
  11. }
  12.  
  13.  
  14. .image_button  {
  15.  
  16. background-image:url(but.png);
  17. background-repeat:no-repeat;
  18. overflow: hidden;
  19. width: 127px;
  20. height: 50px;
  21.  
  22. }
  23.  
  24. .button
  25.     {color: #fff; padding:18px 0 0 20px;
  26.          font-size: 12px;
  27.                        
  28.                
  29.                 }
  30.  
  31. .file_uploader {
  32.        
  33.         margin-top: -50px;
  34.         margin-left:-410px;
  35.         -moz-opacity: 0;
  36.         filter: alpha(opacity=0);
  37.         opacity: 0;
  38.         font-size: 150px;
  39.         height: 100px;
  40.        
  41.         }
  42.  
  43.  </style>
  44.                  
  45.  
  46. <input type="text" id="fileName" class="file_input_textbox" readonly="readonly" >
  47.  
  48. <div class="image_button">
  49. <div class="button">Выбрать файл</div>
  50.  
  51. <input type="file" name="file" class="file_uploader"  onchange="javascript: document.getElementById('fileName').value = this.value" >
  52. </div>

Отредактировано модератором: JustUserR, 31 Июля, 2010 - 03:07:23
Обрамил HTML-код в соответствующий BB-тег
 
 Top
JustUserR
Отправлено: 31 Июля, 2010 - 03:28:55
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)
mataba пишет:
onchange="javascript: document.getElementById('fileName').value = this.value"
При использовании HTML-аттрбутов обработки событий типа on_event содержащийся в них текст сразу воспринимается как исполняемый JS-код с учетом уровня экранирования - причем данный код должен быть синтактически правильным и заэкранированным первым уровнем как с точки зрения HTML-пасрера так и самой виртуальной машины JS По этой причине указание специального протокола javascript: внутри события onchange является лишним - и может привеси к неработоспособност данного кода и синтаксической ошибки
Кроме того использование аттбирута value для объекта типа input type="file" нежелательно поскольку в различных браузерах его значение может варьироваться - но если заранее на основе различия в функциональности JS определить тип браузера то можно применить регулярное выражение которое будет давать универсальный результат При этом для объекта загрузки файла можно кроссбраузерно применять эмуляцию события щелчка по кнопке выбора файла - это дает возможность делать свою кнопку с произвольным дизайном и перенаправлять события щелчка с нее на реальный элемент input type="file"
mataba Можете посмотреть некоторые готовые решения и более подробное описания вопроса стилизации элементов загрузки файлов здесь http://www[dot]xiper[dot]net/html-and-cs[dot][dot][dot]ibora-fayla[dot]html и здесь http://vremenno[dot]net/design/file-inputs-styling/


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB