Файл не выбран еще
У меня есть кнопка «Выбрать файл» следующим образом (я использую Jade, но он должен быть таким же, как Html5):
В браузере отображается кнопка с текстом рядом с ней «Файл не выбран». Я хотел бы изменить текст «Файл не выбран» на что-то другое, например «Видео не выбрано» или «Выберите видео, пожалуйста». Я следил за первыми предложениями здесь:
Но это не изменило текст:
Может ли кто-нибудь помочь мне разобраться, в чем проблема?
Я уверен, что вы не можете изменить метки по умолчанию на кнопках, они жестко запрограммированы в браузерах (каждый браузер отображает заголовки кнопок по-своему). Прочтите статью о стиле кнопок
Есть хороший пример (который включает проверку типа файла) по адресу:
По сути, это доработанная версия идеи Амоса об использовании кнопки.
Я безуспешно пробовал несколько из приведенных выше предложений (но, возможно, это я).
Я переделываю его для преобразования файла Excel с помощью
Вы можете использовать следующий код css, чтобы скрыть (файл не выбран)
HTML
CSS
УБЕДИТЕСЬ, ЧТО ЦВЕТ СООТВЕТСТВУЕТ ЦВЕТУ ФОНА
Используйте, после, если вы хотите отобразить текст после кнопки
Я бы использовал «кнопку» вместо «ярлык», надеюсь, это кому-то поможет.
Это просто отобразит кнопку, при нажатии пользователем появится всплывающее окно выбора файла, после выбора файла произойдет автоматическая загрузка.
Это поможет вам изменить имя на "без файла выберите" Выбрать изображение профиля ".
Вы можете попробовать это так:
Чтобы показать выбранный файл:
Спасибо @ unlucky13 за получение выбранного имени файла
Вот рабочая скрипка:
Просто измените ширину ввода. Около 90 пикселей
Что-то вроде этого могло сработать
HTML
CSS
Использование метки с измененным текстом метки
Но если вы попытаетесь удалить эту подсказку
Это не сработает. Вот мой маленький трюк, чтобы попробовать это, попробуйте название с пробелом. Это будет работать.:)
Правильно, нет никакого способа удалить это «файл не выбран», даже если у вас есть список предварительно загруженных файлов.
Самое простое решение, которое я нашел (и работает в IE, FF, CR), - это следующее
- Скройте ввод и добавьте кнопку "файлы"
- затем вызовите кнопку «файлы» и попросите его привязать загрузку файла (в этом примере я использую JQuery)
Готово, работает отлично :)
См. Ссылку выше. Я использую css, чтобы скрыть текст по умолчанию, и использую метку, чтобы показать то, что я хочу:
Попробуйте это просто трюк
Как это работает
Все очень просто. элемент Label использует тег «for» для ссылки на элемент формы по идентификатору. В этом случае мы использовали «img» в качестве ссылочного ключа между ними. Как только это будет сделано, всякий раз, когда вы нажимаете на ярлык, он автоматически запускает событие щелчка элемента формы, которое в нашем случае является событием щелчка элемента файла. Затем мы делаем элемент файла невидимым, используя display: none и not visibility: hidden, чтобы он не создавал пустого пространства.
Скройте ввод с помощью css, добавьте метку и назначьте ее кнопке ввода. метка будет активна, и при нажатии она вызовет диалоговое окно файла.
у меня есть кнопка "Выбрать файл" следующим образом (я использую Jade, но он должен быть таким же, как Html5):
в браузере это показывает кнопку с текстом рядом с ним "нет выбранного файла". Я хотел бы изменить текст "Нет выбранного файла" на что-то другое, например "нет выбранного видео" или "выберите видео, пожалуйста". Я следовал первым предложениям здесь:
Я не хочу видеть "нет выбранного файла" для поля ввода файла
но это не изменило текст:
может кто-нибудь помочь мне выяснить, где проблема?
Я уверен, что вы не можете изменить метки по умолчанию на кнопках, они жестко закодированы в браузерах (каждый браузер отображает заголовки кнопок по-своему). Проверьте это кнопка стиль статьи
скрыть ввод с помощью css, добавить метку и назначить ее кнопке ввода. метка будет кликабельной, и при нажатии на нее запустится диалоговое окно файла.
затем стиль метки в виде кнопки, если вы хотите.
- скрыть ввод и добавить кнопку "файлы"
- затем вызовите кнопку "файлы" и попросите его связать fileupload (я использую JQuery в этом примере)
но если вы попытаетесь удалить эту подсказку
это не будет работать. Вот мой маленький трюк, чтобы работать с этим, попробуйте название с пробелом. Это сработает.:)
попробуйте это просто трюк
как это работает
Это очень просто. элемент Label использует тег " for " для ссылки на элемент формы по идентификатору. В этом случае мы использовали "img" В качестве опорного ключа между ними. Как только это будет сделано, всякий раз, когда вы нажимаете на метку, он автоматически запускает событие щелчка элемента формы, которое является событием щелчка элемента файла в нашем случае. Затем мы делаем элемент файла невидимым с помощью display:none и not видимость: скрытый, чтобы он не создавал пустое пространство.
наслаждайтесь кодирования
Я хотел бы удалить всплывающую подсказку «Файл не выбран» из файла, введенного в Google Chrome (я вижу, что подсказка не отображается в Firefox).
Обратите внимание, что я говорю не о тексте внутри поля ввода, а о всплывающей подсказке, которая появляется, когда вы наводите курсор мыши на ввод.
Я пробовал это без везения:
23 ответа
Это встроенная часть браузеров webkit , и вы не можете удалить ее. Вам следует подумать о хакерском решении, таком как покрытие или скрытие входных файлов.
Лучшее решение для меня - это обернуть input [type = "file"] в оболочку и добавить код jquery:
Я придумал хакерское решение, которое полностью удаляет «Файл не выбран» плюс дополнительное пространство, добавляемое после этого текста (в Chrome я получаю что-то вроде: «Файл не выбран»).
Это полностью испортило мое выравнивание страниц, поэтому я действительно боролся с этим, чтобы найти решение. Внутри атрибута стиля входного тега установка «ширины» в ширину кнопки устранит конечный текст и пробелы. Так как ширина кнопки не одинакова во всех браузерах (например, она немного меньше в Firefox), вы также захотите установить цвет стиля на тот же цвет, что и на фоне страницы (в противном случае - «блуждающий» Нет "может просвечивать). Мой тег входного файла выглядит так:
Подсказка по умолчанию может быть отредактирована с помощью атрибута title
Но если вы попытаетесь удалить эту подсказку
Это не сработает. Вот мой маленький трюк, чтобы попробовать это, попробуйте название с пробелом. Это сработает.:)
Вы можете отключить всплывающую подсказку, задав заголовок с пробелом в веб-браузерах, таких как Chrome, и пустую строку в Firefox или IE (протестировано в Chrome 35, FF 29, IE 11, Safari Mobile).
Очень просто, забудьте про CSS, предназначенный для ввода ["type"), это не работает для меня. Я не знаю почему. Я получил свое решение в своем теге HTML
Это хитрый. Я не смог найти способ выбрать элемент «no file selected», поэтому создал маску с помощью псевдо-селектора: after.
Мое решение также требует использования следующего псевдо-селектора для стиля кнопки:
К вашему сведению: это будет работать только в браузерах webkit.
P.S., если кто-нибудь знает, как просматривать псевдо-селекторы webkit, такие как приведенный выше в инспекторе webkit, пожалуйста, дайте мне знать
Объединяя некоторые из предложений выше, используя jQuery, вот что я сделал:
И поместите класс "неиспользуемый" в ваши входные данные файла. Это просто и работает довольно хорошо.
Для меня, я просто хотел, чтобы текст был невидимым и все еще использовал кнопку браузера.
Мне нравятся все предложения от undefined, но у меня был другой вариант использования, надеюсь, это поможет кому-то в той же ситуации.
Вам нужно будет настроить контроль довольно много, чтобы достичь этого.
Во всех браузерах и просто. это сделало это для меня
Напрямую вы не можете многое изменить в input [type = file].
Установите непрозрачность файла типа ввода: 0 и попробуйте поместить относительный элемент [div / span / button] поверх него с помощью пользовательского CSS
Все ответы здесь сильно усложнены или, в противном случае, совершенно неверны.
Я создал эту скрипку самым простым способом. При нажатии кнопки «Выбрать файл» откроется меню выбора файла. Затем вы можете стилизовать кнопку так, как вам хочется. По сути, все, что вам нужно сделать, это скрыть введенный файл и вызвать искусственный щелчок по нему при нажатии другой кнопки. Я протестировал это на IE 9, FF и Chrome, и все они работают нормально.
Сюрприз, чтобы никто не упомянул о event.preventDefault()
Затем вы можете использовать различные стили, такие как width , height или другие свойства, чтобы создать свой собственный входной файл.
Оберните и сделайте невидимым. Работа в Chrome, Safari && FF.
Даже если вы установите прозрачность на ноль, появится всплывающая подсказка. Попробуйте visibility:hidden на элементе. Это работает для меня.
Этот работает для меня (по крайней мере, в Chrome и Firefox):
Я нашел очень простое решение, просто установил пустую строку в атрибуте title.
Пройдите -webkit-appearance: . В любом случае стоит попробовать.
Надеюсь, это поможет :)
Лучше избегать использования ненужного JavaScript. Вы можете воспользоваться тегом label, чтобы расширить цель щелчка ввода, например:
Несмотря на то, что ввод скрыт, ссылка по-прежнему работает для него как цель щелчка, и вы можете стилизовать ее так, как хотите.
Вы можете установить ширину для вашего элемента, который будет показывать только кнопку и скрывать «файл не выбран».
Я хотел бы удалить подсказку "нет выбранного файла" из файла ввода в Google Chrome (я вижу, что подсказка не отображается в Firefox).
обратите внимание, что я говорю не о тексте внутри поля ввода, а о подсказке, которая появляется при наведении курсора мыши на ввод.
Я пробовал это без удачи:
это родная часть webkit - браузеры и вы не можете удалить его. Вы должны думать о хаки решение, как покрытие или прячась файл входных данных.
A hacky устранение:
Скрипка
для меня, я просто хотел, чтобы текст был невидимым и по-прежнему использовать родную кнопку браузера.
Мне нравятся все предложения undefined, но у меня был другой случай использования, надеюсь, это поможет кому-то в той же ситуации.
подсказка по умолчанию может быть отредактирована с помощью атрибута title
но если вы попытаетесь удалить эту подсказку
Это не будет работать. Вот мой маленький трюк, чтобы работать с этим, попробуйте название с пробелом. Это сработает.:)
вы можете отключить подсказку, устанавливающую заголовок с пробелом в браузерах webkit, таких как Chrome, и пустую строку в Firefox или IE (проверено на Chrome 35, FF 29, IE 11, safari mobile)
во всех браузерах и просто. это сделало это для меня
это работает для меня (по крайней мере, в Chrome и Firefox):
очень легко, забудьте CSS таргетинг на вход ["тип"] вещь, это не работает для меня. Я не знаю, почему. Я получил свое решение в моем HTML-теге
конец задачи
Я нашел решение, очень легко просто установить пробел в атрибуте title.
лучше избегать использования ненужного javascript. Вы можете воспользоваться тегом label, чтобы развернуть цель щелчка ввода следующим образом:
несмотря на то, что вход скрыт, ссылка по-прежнему работает как цель щелчка для нее, и вы можете стилизовать ее так, как хотите.
оберните и сделайте невидимым. Работа в Chrome, Safari & & FF.
даже если вы установите непрозрачность на ноль, всплывающая подсказка появится. Попробуй visibility:hidden на элемент. Это работает на меня.
вы можете установить ширину для элемента yor, который покажет только кнопку и скроет "нет выбранного файла".
Я ищу хороший ответ для этого. и я нашел это:
Сначала удалите 'no file chosen'
затем работать с кнопкой -webkit-file-upload-button таким образом:
надеюсь, что это то, что вы искали, это работает для меня.
комбинируя некоторые из приведенных выше предложений, используя jQuery, вот что я сделал:
и:
и поместите класс "неиспользуемый" на ваши файловые входы. Это просто и работает довольно хорошо.
лучшее решение для меня-обернуть вход [type= "file"] в обертку и добавить код jquery:
Я придумал хакерское решение, которое полностью удаляет "нет выбранного файла" плюс дополнительное пространство, которое добавляется после этого текста (в Chrome я получаю что-то вроде: "Файл не выбран ").
это полностью испортило мое выравнивание страницы, поэтому я действительно боролся с ним, чтобы найти решение. Внутри атрибута стиля входного тега установка "width" на ширину кнопки устранит конечный текст и пробелы. Так как ширина кнопки не одинакова у всех браузеры (например, это немного меньше в Firefox), вы также захотите установить цвет стиля в тот же цвет, что и фон страницы (в противном случае может появиться случайное "нет"). Мой тег входного файла выглядит так:
это работает для меня!
затем вы можете использовать различные стили, такие как width , height или другие свойства, чтобы создать свой собственный входной файл.
удивительно видеть, что никто не упомянул о event.preventDefault()
Я думаю, что многих, как и меня, не совсем устраивает стандартный вид поля загрузки файлов. Помимо того, что оно, грубо говоря, некрасивое, так еще и в разных браузерах выглядит по-разному.
Наша же задача – сделать поле более привлекательным и, разумеется, привести его к единству.
Для решения задачи нам поможет тег label, который связывает текст и прочие элементы с элементами формы (в нашем случае – с кнопкой), jQuery (который поможет нам получить необходимую информацию о выбранных файлах – имена и их расширение) и дополнительное поле input, где мы будем непосредственно хранить нашу информацию о файлах.
1. Первое, что вам потребуется – это само поле с выбором файла. Код его следующий:
И выглядит все это пока так:
Как вы заметили в коде, дополнительное текстовое поле мы заблокировали, чтобы в дальнейшем пользователь не мог на него воздействовать, ведь в нем у нас будет выводиться информация о файле.
2. Теперь мы напишем небольшой скрипт, который как раз и будет выводить нам информацию о файле:
Код желательно вставить перед закрывающим тегом . И смотрим, что у нас получилось:
Отлично! То, что нам нужно. Теперь осталось скрыть стандартное поле выбора файла и причесать нашу созданную форму.
3. Для этого напишем небольшой CSS-стиль:
Все это сохраняем и любуемся результатом:
По-моему, очень неплохо.
Возможные ошибки в работе этого метода
Из так называемых проблем, по которым этот способ может у вас не сработать, – это отсутствие библиотеки jQuery (очень частая проблема статичных сайтов). Решается следующим способом.
Перед закрывающим тегом подключите библиотеку:
Хочу подчеркнуть, что, в отличие от подобных инструкций на других сайтах, моя – более простая и к тому же может работать с множеством фалов в вашем поле (в таком случае все выбранные файлы в поле будут указываться через запятую).
Читайте также: