Файл не выбран еще

Обновлено: 07.07.2024

У меня есть кнопка "Выбрать файл" следующим образом (я использую Jade, но она должна быть такой же, как Html5):

В браузере отображается кнопка с рядом рядом с ней "Нет выбранного файла". Я хотел бы изменить текст "Нет файлов" на что-то еще, например "Без видео" или "Выбрать видео". Я следовал первым предложениям здесь:

Но это не изменило текст:

Может кто-нибудь помочь мне выяснить, где проблема?

@MahmoudFarahat Я не хочу его удалять, я хочу изменить текст Вы не можете удалить текст и поставить метку-заполнитель рядом с ним?

Я уверен, что вы не можете менять ярлыки по умолчанию на кнопках, они жестко закодированы в браузерах (каждый браузер делает кнопки подписи по-своему). Ознакомьтесь с этой моделью оформления стилей

Это не метка на кнопке, а «Нет выбранного файла» рядом с ней. Когда я выбираю файл, он меняется с Нет выбранного файла на fileName.something. Поэтому я считаю, что это должно быть изменчивым. да, вы можете изменить это. проверьте мой ответ ниже.

Скройте ввод с помощью css, добавьте метку и назначьте ее кнопке ввода. метка будет кликабельна, и при нажатии на нее откроется диалоговое окно файла.

Затем создайте ярлык как кнопку, если хотите.

Это работает даже в IE9, где вы не можете скрыть file input и щелкнуть по нему из JavaScript. Спасибо! Отличное решение, оно даже позволяет легко настроить поле Интересное решение HTML, но плохо для удобства использования. Пользователь всегда увидит «Выбрать файл» или его эквивалент, даже после выбора файла. Вы можете скрыть метку «Выбрать файл» после image.onLoad, если вы не хотите, чтобы пользователь загружал больше изображений. Единственная особенность, которую я вижу в этом опускании, - это возможность перетаскивать и пускать файл на вход Просто, но отлично работает. Даже это может быть улучшено с помощью этой ручки codepen.io/nopr/pen/rpsnd Этот ответ нарушает функциональность перетаскивания при обычном вводе файлов. Как эту функциональность можно добавить обратно? Вы можете разместить div, или div содержит метку. Вы можете стилизовать этот div или метку так, как вам нравится, и поместить в нее другие элементы, такие как заголовок «перетащить сюда» или даже изображение. Этот элемент может обрабатывать события перетаскивания. Просто убедитесь, что у него есть атрибут draggable. Добавляя прослушиватели к этому div или метке, вы, наконец, получаете то, что пропало в данных события, отправленных событием ondrop, и передаете их функциям, которые обрабатывают ввод файла. в HTML: <label ondrop = "myScript"> в JavaScript: object.ondrop = function () ; или object.addEventListener («drop», myScript);

См. ссылку выше. Я использую css, чтобы скрыть текст по умолчанию и использовать метку, чтобы показать, что я хочу:

Правильно, нет способа удалить этот файл без выбора, даже если у вас есть список файлов предварительной загрузки.

Самое простое решение, которое я нашел (и работает в IE, FF, CR), является следующим

Скройте ввод и добавьте кнопку "файлы".
затем вызовите кнопку "файлы" и попросите его связать файловую загрузку (я использую JQuery в этом примере)

Сделано, отлично работает:)

Но если вы попытаетесь удалить эту подсказку

Это не работает. Вот мой маленький трюк, чтобы работать над этим, попробуйте название с пробелом. Он будет работать.:)

Я тестировал в Chrome и во всех браузерах. Работает нормально. Можете ли вы проверить это и проверить. Опробовано снова в Chrome, Safari, Firefox. Это не работает. Я проверяю в Chrome версии 56.0.2924.87 он работает отлично. Какую версию вы используете? @PantsMagee Он просто добавляет всплывающую подсказку с текстом, который вы установили в атрибуте title , как я вижу Как получить текст «Выбрать логотип компании» для отображения под кнопкой, а не справа?

Попробуйте это просто трюк

Как это работает

Это очень просто. элемент Label использует тег "для" для ссылки на элемент формы по id. В этом случае мы использовали "img" в качестве эталонного ключа между ними. Как только это будет сделано, всякий раз, когда вы нажимаете на метку, он автоматически вызывает событие щелчка элемента формы, которое является событием щелчка элемента файла в нашем случае. Затем мы создаем невидимый элемент файла, используя display: none, а не видимость: скрытый, чтобы он не создавал пустое пространство.

Я хотел бы удалить всплывающую подсказку «Файл не выбран» из файла, введенного в 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, чтобы расширить цель щелчка ввода, например:

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

Вы можете установить ширину для вашего элемента, который будет показывать только кнопку и скрывать «файл не выбран».

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

Наша же задача – сделать поле более привлекательным и, разумеется, привести его к единству.

Для решения задачи нам поможет тег label, который связывает текст и прочие элементы с элементами формы (в нашем случае – с кнопкой), jQuery (который поможет нам получить необходимую информацию о выбранных файлах – имена и их расширение) и дополнительное поле input, где мы будем непосредственно хранить нашу информацию о файлах.

1. Первое, что вам потребуется – это само поле с выбором файла. Код его следующий:

И выглядит все это пока так:

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

2. Теперь мы напишем небольшой скрипт, который как раз и будет выводить нам информацию о файле:

Код желательно вставить перед закрывающим тегом </body>. И смотрим, что у нас получилось:

Отлично! То, что нам нужно. Теперь осталось скрыть стандартное поле выбора файла и причесать нашу созданную форму.

3. Для этого напишем небольшой CSS-стиль:

Все это сохраняем и любуемся результатом:

По-моему, очень неплохо.

Возможные ошибки в работе этого метода

Из так называемых проблем, по которым этот способ может у вас не сработать, – это отсутствие библиотеки jQuery (очень частая проблема статичных сайтов). Решается следующим способом.

Перед закрывающим тегом </head> подключите библиотеку:

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

В этой статье рассмотрим способ, который поможет решить проблему - как изменить поле добавления файла для формы отправки. Данная статья поможет тем, кто просто хочет придать форме более свежий вид или вы занимаетесь разработкой посадочных страниц(Landing Page) и вас не устраивает обычный вид формы. Ведь на лендингах чаще используется яркий, необычный привлекающий внимание дизайн, а стандартное поле добавления файла, как то не вписывается в данную концепцию.

Все преобразование мы совершим с помощью стилей CSS и jQuery. Когда вы изучите материал, то увидите, что можно обойтись только CSS, но тогда не будет видно какой файл выбран. как раз для динамики и будет использоваться jQuery. Когда все будет закончится, результат будет примерно следующим:

Суть такого изменения в подмене нашего поля на новое. По сути такой же способ как я описывал недавно в статьях - Изменение радио кнопок с помощью CSS и Изменение чекбоксов с помощью CSS. И так не будем втягивать и приступим к нашей задаче.

Для начала нужна разметка HTML. У меня будет свой код, у вашей формы свой. Главное, вы должны заменить свое поле выбора файла на мое или подогнать свое под основные параметры моего. Обычное поле добавления файла выглядит примерно так:

У нас же будет иметь следующий вид:

Давайте немножко разберем, что и как.

<div - заключаем все в блок контейнер. Условие обязательное. Присваиваем блоку класс fl_upld.
<label><input type="file" name="file">Выберите файл</label> - наше поле прикрепления файла заключаем в label. Это наш и идентификатор поля. Самому полю присваиваем Тоже важный момент. Ну и добавляем текст - Выберите файл. Этот текст будет на будущей кнопке.
<div не выбран</div> - блок, который изначально выводит текст - Файл не выбран. После выбора файла вместо этого текста появится название файла. данному блоку присваиваем Забегу наперед, скажу, что если не будете подключать скрипт для вывода имени файла, то можете не добавлять данный блок. У вас будет просто кнопка без динамики.

Далее добавляем несложные стили нашей кнопке. Просто добавьте следующий код в свой файл стилей:

Быстро расскажу, что за что отвечает.

Теперь приступим к последнему шагу, добавлению скрипта вывода имени файла при добавлении. Так как скрипт работает на jQuery, сначала нужно подключить библиотеку. если это уже сделано делать этого не нужно.

Если вы не знаете как правильно добавлять скрипт и библиотеку, то прочитайте статью - Как и где подключить скрипт?

Разберем немного сам скрипт.

То есть нужно просто правильно указать два ID. Если Вы будете менять айди и классы на свои, то не запутайтесь и укажите везде правильно, чтобы все корректно работало. Сделав все правильно, результат не заставит себя ждать. Если вдуматься и понять все, то становится ясно, что сложного тут ничего нет.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)

Читайте также: