Каков наилучший способ сделать это совместимым со всеми браузерами?
Он уже совместим со всеми браузерами. Только не пытайтесь слишком усердно писать сценарий или пересматривать стиль. У вас есть минимальные возможности настройки с полем загрузки файла, отчасти по очевидным причинам безопасности и отчасти потому, что многократный рендеринг расположения текста + кнопки во многих браузерах просто не поддается стилизации примитивов, которые работают на отдельных полях.
(например, если щелкнуть текстовое поле в некоторых браузерах, откроется поле ввода).
К счастью, люди, чьи браузеры делают это, уже будут использоваться для заполнения полей загрузки; действительно, они будут ожидать, что браузер сделает это, и будут сбиты с толку, если вам удастся остановить это.
(И это разумная мера: разрешение ввода в поле имени файла редко бывает полезным, но в прошлом оно вызывало дыры в безопасности.)
Последовательное использование кнопки обзора:
Ничто в поле загрузки файла не требует даже кнопки просмотра или диалогового окна поиска файлов. Вы могли бы, например, драп и падение вместо этого. Браузер решает это; как автор сайта вы не заглядываете.
Нам бы хотелось, чтобы текстовое поле и кнопка выглядели так же, как и остальная часть нашего веб-сайта.
Это действительно невозможно в рамках HTML. Отсюда «сторонние загрузчики», обычно Flash с отступлением от HTML.
Существует один подход , который можно сортировать, чтобы загрузка файла выглядела так, как вы хотите, но это не очень хорошо. Вы вводите текстовое поле и кнопку по своему усмотрению, слушаете изменения в поле загрузки файла и копируете значение в текстовое поле для отображения. Текстовое поле должно быть доступно только для чтения, поскольку пользователь не сможет выбрать файл оттуда.
Затем вы помещаете реальный элемент управления загрузкой файлов поверх поддельного с позиционированием CSS и назначаете ему непрозрачность CSS (альфа-фильтр в IE), чтобы он был настолько слабым, что его не было видно. Затем вы должны надеяться, что браузер решит поместить кликабельную часть поля загрузки файла поверх того места, где вы визуализировали свою кнопку. Хотя вы можете поиграть и проверить его на работоспособность во многих популярных браузерах, он действительно очень хрупкий и почти наверняка полная трата времени.