Каков наилучший способ заменить кнопку просмотра файлов в HTML?

Question

Я знаю, что при использовании тега input на type="file.

можно заменить кнопку просмотра, созданную в формате html.

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

Answer 1

Лучший способ - сделать элемент управления вводом файла почти невидимым (при очень низкой непрозрачности - не отображать " visibility: hidden " или " : none") и обязательно расположите что-нибудь под ним - с более низким z-index .

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

В этой статье подробно рассматривается техника.

Answer 2

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

Например:

<input type="file" id="fileInput">
<img src="...">

#fileInput{
    position: absolute;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

Answer 3

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

Answer 4

Вы также можете использовать Flash Uploader, например, SWFupload .

Answer 5

Технически это невозможно в целях безопасности, поэтому пользователя нельзя ввести в заблуждение.

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

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