Изменить текст по умолчанию в типе ввода = «файл»?

Я хочу поменять текст по умолчанию на кнопку « Choose File », когда мы используем input="file" .

введите описание изображения здесь

Как я могу это сделать? Также, как вы можете видеть, кнопка изображения находится в левой части текста. Как я могу поместить его в правую часть текста?

У каждого браузера есть собственное исполнение элемента управления, и поэтому вы не можете изменить ни текст, ни ориентацию элемента управления.

Есть несколько «хакеров», которые вы можете попробовать, если хотите получить решение html / css, а не решение Flash или Silverlight .

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

http://www.appelsiini.net/projects/filestyle

Лично, потому что большинство пользователей придерживаются своего браузера по выбору и поэтому, вероятно, привыкли видеть элемент управления в стандартном представлении, они, вероятно, путаются, если они видят что-то другое (в зависимости от типов пользователей, с которыми вы имеете дело) ,

Используйте атрибут "for" label для input .

 

Ниже приведен код для извлечения имени загруженного файла


 $("#files").change(function() { filename = this.files[0].name console.log(filename); }); 
  

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

Он отлично работает на кордове с iOS

    

Я думаю, это то, что вы хотите:

      JS Bin       

Это невозможно. В противном случае вам может потребоваться использовать управление загрузкой Silverlight или Flash.

Вот как вы можете это сделать:

JQuery:

 $(function() { $("#labelfile").click(function() { $("#imageupl").trigger('click'); }); }) до $(function() { $("#labelfile").click(function() { $("#imageupl").trigger('click'); }); }) 

CSS

 .file { position: absolute; clip: rect(0px, 0px, 0px, 0px); display: block; } .labelfile { color: #333; background-color: #fff; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; white-space: nowrap; padding: 6px 8px; font-size: 14px; line-height: 1.42857143; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 

Код HTML:

  

Используя Bootstrap, вы можете сделать это, как показано ниже.

     Bootstrap Example        Upload image from here   

Я сделал скрипт и опубликовал его в GitHub: get selectFile.js Прост в использовании, не стесняйтесь клонировать.

HTML

    

JS

 var getFile = new selectFile; getFile.targets('choose','selected'); 

DEMO

jsfiddle.net/Thielicious/4oxmsy49/

Обновление 2017:

Я провел исследование того, как это можно достичь. И лучшее объяснение / учебник здесь: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Я напишу резюме здесь на всякий случай, когда он станет недоступным. Поэтому у вас должен быть HTML:

   

Затем скройте ввод с помощью CSS:

 .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;} 

Затем нарисуйте ярлык:

 .inputfile + label { font-size: 1.25em; font-weight: 700; color: white; background-color: black; display: inline-block; } 

Затем, при желании, вы можете добавить JS для отображения имени файла:

 var inputs = document.querySelectorAll( '.inputfile' ); Array.prototype.forEach.call( inputs, function( input ) { var label = input.nextElementSibling, labelVal = label.innerHTML; input.addEventListener( 'change', function( e ) { var fileName = ''; if( this.files && this.files.length > 1 ) fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length ); else fileName = e.target.value.split( '\\' ).pop(); if( fileName ) label.querySelector( 'span' ).innerHTML = fileName; else label.innerHTML = labelVal; }); }); 

Но на самом деле просто прочитайте учебник и загрузите демоверсию, это действительно хорошо.

Я бы использовал button для запуска input :

   

Быстрая и чистая.

Это должно работать:

вход. className :: – webkit-file-upload-button { style content .. }

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

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

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

Хорошо, так просто, просто css способ создания вашего пользовательского входного файла.

Используйте ярлыки, но, как вы знаете из предыдущих ответов, метка не вызывает функцию onclick в firefox, может быть ошибкой, но не имеет значения со следующим.

  

Что вы делаете, так это стиль ярлыка, чтобы посмотреть, как вы хотите, чтобы он

  .custom-file-input { color: transparent;/* This is to take away the browser text for file uploading*/ /* Carry on with the style you want */ background: url(../img/doc-o.png); background-size: 100%; position: absolute; width: 200px; height: 200px; cursor: pointer; top: 10%; right: 15%; } 

теперь просто скройте фактическую кнопку ввода, но вы не можете установить ее на visability: hidden

Поэтому сделайте невидимым, установив opacity: 0;

 input.custom-file-input { opacity: 0; position: absolute;/*set position to be exactly over your input*/ left: 0; top: 0; } 

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

  • Стандартный сжатый способ копирования файла на Java?
  • Как преобразовать InputStream в виртуальный файл
  • Как найти файлы, соответствующие строке подстановки в Java?
  • найти разницу между двумя текстовыми файлами с одним элементом на строку
  • Изменение поведения отступа Vim по типу файла
  • Загрузка файла с весенних controllerов
  • Запустить .jar из пакетного файла
  • Как сохранить загруженный файл в JSF
  • Powershell: всегда генерируется нулевой файл (вывод Compare-Object)
  • Естественный порядок сортировки в C #
  • Java: как определить правильную кодировку кодировки streamа
  • Interesting Posts

    SD-карта не может хранить новые файлы после монтирования с помощью андроида

    Как расшифровать файл в Java, зашифрованном с помощью команды openssl, используя AES?

    Как создать стандартную утилиту для борьбы с андроидами?

    JTable введите ключ

    Использование JSON-файла в приложениях для Android-приложений

    Как определить двунаправленное состояние связи

    Как установить драйвер JDBC в веб-проект Eclipse без обращения к java.lang.ClassNotFoundexception

    как читать данные в формате utf-8 в R?

    Отображение контактного номера и имени контакта в пользовательском списке

    Какую Java ORM вы предпочитаете и почему?

    Как использовать строки файла в качестве аргументов команды?

    Оператор «instanceof» ведет себя по-разному для интерфейсов и classов

    Создайте комбинированный DataTable из двух таблиц данных, связанных с LINQ. C #

    Какие параметры командной строки доступны в Adobe Acrobat (не Reader) для изменения документов (Convert, Merge и т. Д.)?

    Почему мне нужно использовать typedef typename в g ++, но не VS?

    Давайте будем гением компьютера.