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

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

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

Эта статья подробно описывает технику.

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

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

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

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

Например:

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

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

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

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