Используйте Bootstrap FileStyle , который используется для стилизации файловых полей форм. Это плагин для библиотеки компонентов на основе jQuery под названием Twitter Bootstrap
Кажется, не работает для меня. Он по-прежнему показывает кнопки по умолчанию brorser. Кроме того, демонстрация на github.com/markusslima/bootstrap-filestyle.git также не работает - все примеры показывают кнопки по умолчанию. Я что-то упускаю?
Я.
7
@ Тони Э-э-э ... с чего вы взяли, что Bootstrap также не использует "дурацкий <img /> хак"? :-)
Andz
@Я можешь сказать, какой браузер и какая у него версия? Протестировано сейчас на Chrome версии 43.0.2357.130 (64-битная версия) в Linux, и все примеры работают отлично.
Фернандо Кош
20
Бросить библиотеку javascript (с плагином!) На такую маленькую проблему - это не изящное излишество.
MKaama
3
Downvoted. Это даже не ответ, а обходной путь, который требует дополнительной библиотеки. Ответ должен изменить поведение рендеринга для браузеров.
wdetac
108
Вместо этого вы можете поместить изображение и сделать это так:
ПРЕДУПРЕЖДЕНИЕ . В IE9 и IE10, если вы запускаете onClick в файле, вводимом через javascript, форма будет помечена как «опасная» и не может быть отправлена с помощью javascript, не будучи уверенным, что она может быть отправлена традиционно.
Это умное решение. Не могли бы вы также сделать это с помощью элемента <button>?
Код командира
1
@Code Commander -Спасибо, и да, вы можете сделать это с любым элементом, который вы хотите, но наиболее распространенным является элемент <image>. Просто избавьтесь от кнопки + текстовое поле от «ввода файла» ...
ParPar
2
Просто на голову любому, кто использует вышеизложенное, некоторые мобильные браузеры отключают программный запуск кликов при вводе файлов. Конкретно андроид 4 для Galaxy S III
новенькие
Я использую <input type="file" внутри строки gridview asp.net, чьи строки могут быть добавлены динамически ... так что будет очень больно в голове вызывать соответствующий триггер щелчка ввода (той же строки) при нажатии на изображение! : /
Сохаибы
Ваше решение не работает. Вы не задали границы, поля, отступы и цвет фона, иначе это было бы очевидно
yan bellavance
88
Скрыть файл ввода. Создайте новый вход для захвата события щелчка и перешлите его на скрытый вход:
бросая в HTA файл с режимом ie7, мне пришлось удалить ;в конце.
ATek
отлично, не хочу включать начальную загрузку только для того, чтобы изменить два слова текста, но как бы вы это сделали, если ввод файла был создан динамически?
аспаризм
@asparism использует JavaScript для управления DOM, скрывает его, устанавливая его стиль и использует before () и добавляет новый элемент ввода?
MushyPeas
3
@MushyPeas это самый простой способ. пытался поиграть с css но это решение намного быстрее и проще. спасибо
Мара
2
Это был самый простой способ для меня тоже! Это также позволило мне стилизовать кнопку-макет файла как один из набора других параметров кнопки-формы, не беспокоясь о отображении странно выглядящей кнопки-файла «Обзор».
Гарри Мантеакис,
47
Текст «загрузить файл ...» предварительно определен браузером и не может быть изменен. Единственный способ обойти это - использовать компонент загрузки на основе Flash или Java, такой как swfupload .
Или просматривая исходные коды браузеров, по крайней мере, для открытых.
Пекка
Это может быть ответом (на другой вопрос, что-то вроде «Почему содержимое значения», VALUE = «C: \ someFile.txt») для поля ввода файла типа «TYPE =« FILE »», игнорируется браузер? "): stackoverflow.com/questions/1342039
Питер Мортенсен
23
Отлично работает на всех браузерах. Надеюсь, это будет работать и для вас.
На моем FF 41.0.2 он отлично работает. Вы работаете, чтобы решить проблему совместимости браузера, пожалуйста, обратитесь к CSS BOX MODEL, чтобы минимизировать проблему.
Код черный
1
Проблема, вероятно, в том, что FF построен на Gecko, а не на webkit. (мое лучшее предположение)
Cullub
2
<label id = "addButton" for = "Загрузить" style = "background-color: # 000; color: #fff; отступ: 4px; border-radius: 4px; font-family: monospace;" > Выберите какой-нибудь файл </ label> <input id = "Upload" type = "file" множественный = "множественный" name = "_ photos" accept = "image / *" style = "visibility: hidden">
код черный
4
Хорошо, спасибо! Проверьте это JSFiddle . Если вы отредактируете свой ответ этим, я думаю, что это достойно воззвания :)
Cullub
10
это плагин JQuery для изменения текста кнопки элемента входного файла.
<labelclass="btn btn-primary"><iclass="fa fa-image"></i> Your text here<inputtype="file"style="display: none;"name="image"></label>
[Изменить с помощью фрагмента]
<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"rel="stylesheet"/><linkhref="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"/><labelclass="btn btn-primary"><iclass="fa fa-image"></i> Your text here<inputtype="file"style="display: none;"name="image"></label>
Попробуйте посмотреть, что я сделал здесь jsfiddle.net
Кен Карло
Спасибо, именно то, что я хотел :)
Гарт Бейкер
7
Я думаю, что это то, что вы хотите:
<buttonstyle="display:block;width:120px;height:30px;"onclick="document.getElementById('getFile').click()">Your text here</button><inputtype='file'id="getFile"style="display:none">
РЕДАКТИРОВАТЬ : я вижу теперь по комментариям, которые вы спрашиваете о тексте кнопки, а не путь к файлу. Виноват. Я оставлю свой первоначальный ответ ниже на тот случай, если кто-то, кто наткнется на этот вопрос, интерпретирует его так, как я это сделал изначально.
2-е РЕДАКТИРОВАНИЕ : я удалил этот ответ, потому что я решил, что я неправильно понял вопрос, и мой ответ не имеет отношения. Тем не менее, комментарии в другом ответе указали, что люди все еще хотели видеть этот ответ, поэтому я его удаляю.
МОЙ ОРИГИНАЛЬНЫЙ ОТВЕТ (я думал, что ОП спрашивает о пути, а не о кнопке):
Это не поддерживается в целях безопасности . Веб-браузер Opera раньше поддерживал это, но он был удален. Подумайте, что было бы возможно, если бы это было поддержано; Вы можете создать страницу с вводом для загрузки файла, предварительно заполнив ее путем к некоторому конфиденциальному файлу, а затем автоматически отправить форму, используя JavaScript, вызванный onloadсобытием. Это может произойти слишком быстро для пользователя, чтобы что-то с этим сделать.
<formenctype='multipart/form-data'action='/uploads.php'method=post><labelfor=b1><u>Your</u> caption here
<inputstyle='width:0px'type=filename=upfileid=b1onchange='optionalExtraProcessing(b1.files[0])'accept='image/png'></label></form>
Это работает без какого-либо JavaScript . Вы можете украсить этикетку в любой степени сложности, к вашему сердцу. Когда вы нажимаете на ярлык, щелчок автоматически перенаправляется на вход файла. Сам вход файла может быть сделан невидимым любым методом. Если вы хотите, чтобы метка выглядела как кнопка, есть много решений, например:
Вы можете просто добавить некоторые трюки CSS. Вам не нужен JavaScript или несколько входных файлов, и я сохраняю существующий атрибут значения . вам нужно добавить только CSS . Вы можете попробовать это решение.
для меня это не работает пользовательский текст с bootstrap-filestyle . Это помогает с оформлением кнопок, но текст его странно изменить, прежде чем заняться борьбой с CSS, я попробую следующее:
bootstrap-filestyle отображает компонент в виде span с классом butonText, поэтому при загрузке документа просто измените текст. легко и правильно, и он должен работать во всех браузерах.
Это альтернативное решение, которое может вам помочь. Это скрывает текст, который появляется вне кнопки, смешивая его с цветом фона div. Затем вы можете дать div название, которое вам нравится.
В Chrome 39 я вижу текст ЗАГРУЗИТЬ ИЗОБРАЖЕНИЕ и кнопку <input>. Возможно, обработка Chrome файловых вводов изменилась с тех пор, как вы опубликовали это?
EricP
@ ян-беллаванс, что ты делаешь? Если вы считаете, что ответ неправильный или бесполезный, понизьте голос, но ни в коем случае не портите его!
Ответы:
Используйте Bootstrap FileStyle , который используется для стилизации файловых полей форм. Это плагин для библиотеки компонентов на основе jQuery под названием Twitter Bootstrap
Пример использования:
Включают:
С помощью JavaScript:
Через атрибуты данных:
источник
Вместо этого вы можете поместить изображение и сделать это так:
HTML:
JQuery:
ПРЕДУПРЕЖДЕНИЕ . В IE9 и IE10, если вы запускаете onClick в файле, вводимом через javascript, форма будет помечена как «опасная» и не может быть отправлена с помощью javascript, не будучи уверенным, что она может быть отправлена традиционно.
источник
<input type="file"
внутри строки gridview asp.net, чьи строки могут быть добавлены динамически ... так что будет очень больно в голове вызывать соответствующий триггер щелчка ввода (той же строки) при нажатии на изображение! : /Скрыть файл ввода. Создайте новый вход для захвата события щелчка и перешлите его на скрытый вход:
источник
;
в конце.Текст «загрузить файл ...» предварительно определен браузером и не может быть изменен. Единственный способ обойти это - использовать компонент загрузки на основе Flash или Java, такой как swfupload .
источник
Отлично работает на всех браузерах. Надеюсь, это будет работать и для вас.
HTML:
<input type="file" class="custom-file-input">
CSS:
Изменить
content: 'Select some files';
с текстом, который вы хотите внутри''
ЕСЛИ НЕ РАБОТАЕТ С Firefox, тогда используйте это вместо ввода:
источник
это плагин JQuery для изменения текста кнопки элемента входного файла.
Пример HTML:
Пример JS:
Результат:
источник
JS
больше http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
источник
Просто
[Изменить с помощью фрагмента]
источник
Я думаю, что это то, что вы хотите:
источник
РЕДАКТИРОВАТЬ : я вижу теперь по комментариям, которые вы спрашиваете о тексте кнопки, а не путь к файлу. Виноват. Я оставлю свой первоначальный ответ ниже на тот случай, если кто-то, кто наткнется на этот вопрос, интерпретирует его так, как я это сделал изначально.
2-е РЕДАКТИРОВАНИЕ : я удалил этот ответ, потому что я решил, что я неправильно понял вопрос, и мой ответ не имеет отношения. Тем не менее, комментарии в другом ответе указали, что люди все еще хотели видеть этот ответ, поэтому я его удаляю.
МОЙ ОРИГИНАЛЬНЫЙ ОТВЕТ (я думал, что ОП спрашивает о пути, а не о кнопке):
Это не поддерживается в целях безопасности . Веб-браузер Opera раньше поддерживал это, но он был удален. Подумайте, что было бы возможно, если бы это было поддержано; Вы можете создать страницу с вводом для загрузки файла, предварительно заполнив ее путем к некоторому конфиденциальному файлу, а затем автоматически отправить форму, используя JavaScript, вызванный
onload
событием. Это может произойти слишком быстро для пользователя, чтобы что-то с этим сделать.источник
Использовать
<label>
для подписиЭто работает без какого-либо JavaScript . Вы можете украсить этикетку в любой степени сложности, к вашему сердцу. Когда вы нажимаете на ярлык, щелчок автоматически перенаправляется на вход файла. Сам вход файла может быть сделан невидимым любым методом. Если вы хотите, чтобы метка выглядела как кнопка, есть много решений, например:
источник
Только CSS и класс начальной загрузки
источник
<input type="file">
добавьте изображение и<input style="position:absolute">
оно будет занимать пространство<input type="file">
Используйте следующий CSS для элемента file
источник
Если вы используете рельсы и у вас возникли проблемы с их применением, я бы хотел добавить несколько советов из оригинального ответа @Fernando Kosh
откройте файл application.js и добавьте эту строку ниже
// = требуется bootstrap-filestyle.min
открой свой кофе и добавь эту строку
$ (": file"). filestyle ({buttonName: "btn-primary", buttonBefore: true, buttonText: "Ваш текст здесь", icon: false});
источник
Вы можете просто добавить некоторые трюки CSS. Вам не нужен JavaScript или несколько входных файлов, и я сохраняю существующий атрибут значения . вам нужно добавить только CSS . Вы можете попробовать это решение.
источник
Вот способ «изменить» текст ввода с типом файла, с чистым HTML и javascript:
источник
для меня это не работает пользовательский текст с bootstrap-filestyle . Это помогает с оформлением кнопок, но текст его странно изменить, прежде чем заняться борьбой с CSS, я попробую следующее:
bootstrap-filestyle отображает компонент в виде span с классом butonText, поэтому при загрузке документа просто измените текст. легко и правильно, и он должен работать во всех браузерах.
ура
источник
Я сделал это так для моего проекта:
источник
Это альтернативное решение, которое может вам помочь. Это скрывает текст, который появляется вне кнопки, смешивая его с цветом фона div. Затем вы можете дать div название, которое вам нравится.
источник