Каков наилучший способ заменить кнопку просмотра файла в html?
Вопрос
Я знаю, что можно заменить кнопку просмотра, которая генерируется в 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 Загрузить чтобы сделать и это тоже.