- custom styles / css

На Quirksmode.org есть интересная статья об этом: http://www.quirksmode.org/dom/inputfile.html

попробуйте это -

1. Возьмите нормаль и поместите ее в элемент с положение: родственник.
2. К этому же родительскому элементу добавьте нормальное и изображение, которое иметь правильные стили. Должность эти элементы абсолютно, так что они занимают то же место, что и .
3. Установите z-индекс на 2, чтобы он лежал на верхней части стилизованного ввода/изображения.
4. Наконец, установите непрозрачность до 0. Теперь становится эффективно невидимый, а стили ввод/изображение просвечивает, но вы можно еще нажать на кнопку "Обзор" кнопка. Если кнопка расположена поверх изображения пользователь кажется, нажмите на изображение и получает нормальный выбор файла окно. (Обратите внимание, что вы не можете использовать видимость: скрытая, потому что действительно невидимый элемент не кликабельный, тоже, и нам нужно, чтобы оставался кликабельным) До сих пор эффект может быть достигается с помощью чистого CSS. Тем не мение, одной функции по-прежнему не хватает.
5. Когда пользователь выбрал файл, видимое, фальшивое поле ввода должно показать правильный путь к этому файлу, как обычно было бы. Это просто вопрос копирование нового значения на поддельный ввод поле, но нам нужен JavaScript, чтобы сделать это.

Подробнее - http://www.quirksmode.org/dom/inputfile.html

Вы можете попробовать использовать swfupload, проект с открытым исходным кодом, который встраивает крошечный файл Flash на страницу вместо входного файла... Вы можете использовать CSS, чтобы стилизовать кнопку, которая запускает загрузку Flash, как вам угодно.

Недостаток: с ним может быть сложно работать, и, конечно же, у ваших пользователей должна быть флешка.

Плюс: в диалоге загрузки можно выбрать сразу несколько файлов!