#html #css #file #forms #input
#HTML #css #файл #формы #ввод
Вопрос:
В HTML-форме у меня есть поле файла, подобное этому:
<div class="filefield">
<input type="file" name="myfile" id="fileinput">
</div>
Он отображает кнопку и некоторый текст помимо кнопки. Когда ни один файл еще не был выбран, текст выглядит следующим образом: No file chosen . Если файл уже выбран, отображается имя файла.
Этот текст отображается с правой стороны кнопки. Я хочу, чтобы это отображалось под кнопкой. Я пробовал множество способов в CSS, и ничего не работает, No file chosen просто всегда отображается справа от кнопки, даже если и div, и входные данные имеют фиксированную ширину, равную ширине кнопки, и фиксированную высоту, достаточную для кнопки и двух строк текста, текст все равно отображается справа, за пределами div, а не ниже того места, где находится пробел внутри div. Как сделать перенос, чтобы текст отображался под кнопкой?
Комментарии:
1. jsfiddle для игры
2. Помогает фактически связать его: jsfiddle.net/nmeAW
Ответ №1:
Поскольку ответ @ Guffa показывает, что вы не можете возиться с этим полем, вы могли бы создать хак вокруг него.
Как насчет элемента button, который при нажатии действует как кнопка браузера файлов? А затем элемент span, который содержит значение этого файла, введенного браузером? Это наверняка было бы некоторым js-хакерством, но могло бы решить проблему.
Редактировать
Рабочий пример:http://jsfiddle.net/nmeAW/1 /
Правка 2
Еще более эффективный рабочий пример:http://jsfiddle.net/nmeAW/2 /
Комментарии:
1. отличный материал!! Мне это нужно
Ответ №2:
Вы не можете. Поле ввода файла представляет собой единый элемент управления, даже если оно выглядит как несколько элементов управления, которыми можно управлять по отдельности.
Кроме того, то, как отображается элемент управления вводом файла, полностью зависит от того, какой браузер вы используете. Его внешний вид не указан в стандартах, поэтому любой поставщик браузера может отображать его любым способом, который они считают нужным.
Ответ №3:
Вы могли бы заглянуть в jQuery и некоторые из плагинов для загрузки файлов, которые могут помочь вам «изменить стиль» ввода, по существу, скрыв его и активировав / отобразив выбранную информацию о файле в html.
http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/
http://www.uploadify.com/demo/
http://www.plupload.com/example_queuewidget.php
http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/