Как скрыть текстовое поле в Html File Upload

Question

Мне интересно, как скрыть часть текстового поля стандартного тега загрузки html-файла

например

<input type="file" name="somename" size="chars"> 

Это, очевидно, создает текстовое поле, и рядом с этим полем находится кнопка обзора ... Я хочу скрыть часть текстового поля, но удерживать кнопку.

Answer 1

Это наверняка сработает. Я использовал его в своих проектах. Надеюсь, это поможет:)

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Answer 2

Я бы порекомендовал скрыть все это и поместить отдельный объект кнопки, который, при нажатии, в конечном итоге будет нажимать кнопку просмотра ввода.

Вы можете сделать это с помощью CSS и javascript - ознакомьтесь с этой статьей (на самом деле второй раз, когда я использовал эту ссылку сегодня).

Answer 3

Самый простой способ, не упомянутый ни в одном ответе, - это использовать label для input.

<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>

input[type="file"] { display: none; }

Использование label будет полезно, потому что нажатие на метку означает нажатие на ввод. Это будет работать только тогда, когда id ввода соответствует атрибуту for метки.

Answer 4

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

Если вам действительно нужно настроить кнопку загрузки, я рекомендую загрузчик на основе Flash, например SWFUpload или Uploadify , который позволяет вам использовать пользовательское изображение в качестве кнопки, отображать индикатор выполнения и многое другое.

Однако его основная философия отличается от простого встраивания элемента управления в форму. Процесс загрузки происходит отдельно. Сначала убедитесь, что это работает для вас.

Answer 5

Вы можете поместить изображение в качестве фона для кнопки.Это сработало для меня некоторое время назад.

Answer 6

Попробуйте добавить этот CSS к вашему входу

    font-size: 0;

Answer 7

Если вы используете jQuery, взгляните на этот плагин - https://github.com/ajaxray/bootstrap-file-field

Он отобразит поле ввода файла в качестве кнопки начальной загрузки и красиво покажет выбранные имена файлов. Кроме того, вы можете установить различные ограничения, используя простые атрибуты данных или настройки в js.
e, g, data-file-types="image/jpeg,image/png" ограничит выбор типов файлов, кроме изображений jpg и png.

Answer 8

Вы можете скрыть весь элемент и показать вместо него кнопку или ссылку. Это довольно просто.

<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" />
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" />

Элемент загрузки файла скрыт. Кнопка запустит событие click и покажет окно браузера файлов. При выборе файла запускается событие изменения, и это может отправить форму или вызвать функцию сценария.

Надеюсь, это поможет ...

Answer 9

DEMO

Чистый CSS и HTML

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

Плюс, вы должны установить

filter: alpha(opacity=0);

к входному файлу.

Answer 10

input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px);  } /* Hide input field */
@-moz-document url-prefix()
  {
  input[type="file"] { clip: rect(0, 265px, 22px, 125px);  } /* Mozilla */
  }
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */

Это сделает то же самое без JavaScript, но для использования свойства clip требуется абсолютное позиционирование.

Ссылки

• Пользовательская кнопка загрузки
• CSS Wikibook: вырезка