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

Ответ 1

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

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

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

Ответ 2

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

Например:

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

Для этого вы можете использовать загрузчик Flash, например SWFupload.