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

StackOverflow https://stackoverflow.com/questions/108149

  •  01-07-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

Лучший способ - сделать файл input управляющим почти невидимый (придавая ему очень низкую непрозрачность - не делайте этого "видимость:скрытый" или "дисплей:Нет") и обязательно расположите что-нибудь под ним - с более низким z-индекс.

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

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

Другие советы

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

Например:

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

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

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

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

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

Между прочим, этот вопрос уже был задан здесь (где я дал тот же ответ).

Вы можете использовать загрузчик Flash, например SWFUpload Загрузить чтобы сделать и это тоже.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top