Вопрос по html, css, input, file – Каков наилучший способ заменить кнопку просмотра файлов в HTML?

16

Я знаю, что можно использовать кнопку просмотра, которая генерируется в формате HTML, когда вы используетеinput пометить сtype="file.

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

Ваш Ответ

5   ответов
2

вы можете установить непрозрачность ввода файла в 0, поместить свой стилизованный элемент управления сверху с помощью z-index и отправить кликвенты от вашей кнопки на ввод файла. Смотрите здесь для техники:http://www.quirksmode.org/dom/inputfile.html

5

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

Например:

<input type="file" id="fileInput">
<img src="...">
#fileInput{
    position: absolute;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}
0

SWFUpload чтобы сделать это, а также.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
22

almost невидимый (при очень низкой непрозрачности - не делайте & quot;visibility: hidden& Quot; или & quot;display: none& quot;) и обязательно расположите что-нибудь под ним - с более низкимz-index.

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

Эта статья углубляется в технику.

Error: User Rate Limit Exceeded
0

поэтому пользователя нельзя ввести в заблуждение.

Однако есть несколько обходных путей - взгляните наhttp://www.quirksmode.org/dom/inputfile.html для одного примера.

Для справки, этот вопрос уже задавалсяВот (где я дал тот же ответ).

Похожие вопросы