Полностью своя кнопка «Выбрать файл»

[datacompboy]

Скриншот бы хоть, в качестве КДПВ :)

[Dm4k]

Да и демка бы не помешала ;)
для тестирования в разных браузерах

[DyukhaIrkutsk]

Демку добавил в начале топика перед Целью качайте смотрите )

[Alvaro]

Как-то маловато для статьи. И да, способ давно известный, в свой древней статье я его приводил)

[nazarpc]

Хм… использую Plupload, поддерживает клик, Drag'n'Drop.
Есть различные варианты в зависимости от того, что умеет браузер: HTML5, HTML4, Flash, Silverlight.
Я обычно беру только HTML5 вариант для минимизации объема, и даже iframe не нужен.

[lifestar]

Привет! А с телефонов и планшетов загружает картинки/видео?

[nazarpc]

Конечно, почему нет?

[lifestar]

Например, год назад большие видео-файлы с айфонов почему то не загружались. Вот и спрашиваю как сейчас))

[nazarpc]

Вот большие файлы с iphone не загружал, не знаю.

[imbeat]

Где можно «пощупать»?

[Anisotropic]

Не проще input=file с прозрачностью в ноль расположить поверх дива, который и стилизовать?

[SerafimArts]

Проще конечно.
Но мы же не ищем лёгких путей, тем более в статье ссылка есть на статью с этим примером (Способ №3), но автор сказал, что лучше рассмотреть N5

На написание данного текста вдохновил Способ №5 из материала «Делаем красивый input[type=file] для адаптивного сайта…»

Единственное — в статье нет этого способа (вроде):

input[type=file] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /** А дальше пишем что хотим **/
}

[Anisotropic]

Да. Сходил прочитал, есть там такое. Тут только не выделено, почему именно 5-ый способ используется.

[snnwolf]

Можете бросить в меня камнем, но кажется только вчера прочел, что нормальные браузеры запрещают из js вызывать клик на input[type=file]. Пруф

[Alvaro]

Пример нормального браузера?

[snnwolf]

FF, Chome, НЕ IE.
Кстати, в каком из… вы тестировали?

[Alvaro]

Да? А почему у меня работало и работает?

[snnwolf]

отлично, тогда можно демку в студию?

[Alvaro]

Простейшая кнопка на коленке

[Keyten]

Не спорьте.
В html5 разрешили делать click на fileinput, до этого ни хром, ни ff не поддерживали.

[snnwolf]

Кстати только что проверил в консоли хрома. Не работает. Увы…
Взял кусочек вашего кода…
Может я что-то не так сделал?

[Alvaro]

Моего кода?

[snnwolf]

да, вот так

document.getElementById('my_hidden_file').click();

[Alvaro]

Я не автор статьи

[DyukhaIrkutsk]

Еще раз все протестировал, тьфу тьфу работает…
можно глянуть в мою dyukha.rurs.net/MySlider
песочницу на бесплатном(плохом) хостинге
снизу вторая справа кнопка

[NikitchenkoSergey]

а я замечал обратное, когда пытался инпут стилизовать (давно это было):
ие8 не давал делать клик js, а нормальные браузеры давали.
в итоге прозрачность — самое нормальное решение
если кнопка большая, можно сделать, чтобы input ездил за курсором, т.к. размеры его тоже нельзя поправить в некоторых браузерах :)

[Anisotropic]

Хах, интересное решение) Спасибо, мб где-то пригодится.

[homm]

> запрещают из js вызывать клик на input[type=file]

кроме случаев, когда вызов делается внутри обработчика события клика нам чем-либо еще. Может быть не только клика (keydown, например), точно не знаю.

[snnwolf]

Спасибо за решение. Проверил. GOOD! :)

[Blumfontein]

У нас на проекте angular.element('#file-upload').trigger('click') запросто работает.Ну т.е. есть некоторый кастомный блок (кнопка), по клику на который вызываем клик на инпут #file-upload.

[snnwolf]

Спасибо, постараюсь запомнить.

[shmaltorhbooks]

www.uploadify.com/

[MaximAL]

Думаю, пост был бы в несколько раз полезнее, если бы имел демку.

[DyukhaIrkutsk]

Извиняюсь если что сделал не так, человек я тут новый, за что заминусовали не понимаю (.
Демку добавил — в тексте перед Целью ссылка на дропбокс, там весь проект — проверял на IE9+, Opera 12.17, FF 34.05, Yandex 14.10, Chrome 39.0, Chrome Android (какой то 4+ — не успел посмотреть какая там версия была)

[Ruvaleev]

Вот хорошая подборка на эту тему.
obninsksite.ru/blog/html-and-css/input-file-style