Как красиво оформить file input тэг

09 Января 2012 Программирование
4 0

Сейчас на работе делаю небольшой сайт, на котором решили сделать кнопку загрузки файлов нестандартной. Наши дизайнеры любят выпендриваться, а программисты потом мучаются. Дело в том, что input тэг типа file не поддается оформлению. Возможно в последних браузерах благодаря HTML5 это возможно, но в старых это нереально. Поэтому приходится выпендриваться.

Простейший выпендреж – поместить на форму рисунок кнопки, тут же рядом поставить поле для выбора фала: file. Код html будет выглядеть примерно так:

<button name=”decorbutton" class="decorbutton"/>
<input type="file" />

Ну а вот так будет выглядеть CSS

.decorbutton {cursor:pointer; height:30px; width:100px; }
.fileuploader input {cursor:pointer; height:30px; width:100px; 
  position:absolute; top:0; right:0; visibility:hidden}

Извиняюсь, если где-то ошибка, потому что пишу код в MS Word без тестирования просто на глаз. Смысла в том, что input поле типа file делается таким же размером как и кнопка, но невидимой. При этом она прекрасно реагирует на клики и "прекрасно" работает во всех браузерах.

Почему слово "прекрасно" выделено в кавычках? Потому что в одном долбанутом браузере от очень жадной компании такое поле работает чуть-чуть некорректно. В браузере все ничтяк, файл выбирается и сохраняется. Но вот на сервере, когда получаешь запрос, поле Request.File содержит пустые данные о файле. Самое интересное, что общий запрос содержит все данные и если прочитать их с Request.Content, то вы увидите содержимое файла, н не в Request.File[0]. Так что если загружать один файл, то не проблема, можно обойти косяк и прочитать файл непосредственно из содержимого запроса, а имя файла будет в Request.Form[0].

Но в моей задаче нужно было загружать несколько файлов. Что делать? Я бился два часа об этот пример и не мог понять, почему IE не хочет нормально отправлять данные файла. Все браузеры отправляют нормально, а IE

Стал разбираться, почему не работает в IE. Ведь должно. Сначала я думал, что я где-то сделал ошибку в форме и указал неправильно enctype, но нет, все нормально. Позвал еще парня с нашего отдела, чтобы он своим взглядом просмотрел. Ковырялись вместе, все должно работать.

Запустили Fiddler, чтобы посмотреть, как IE отправляет запрос на сервер. Оказалось, что он сливает все файлы в одно целое и пихает их в тело запроса, а так же создает для каждого файла блог данных, но он пустой:

----------------------------- XXXXXXXX
Content-Disposition: form-data; name="file"; filename="" 
Content-Type: application/octet-stream 
-----------------------------XXXXXXXX

Как видите имя файла и содержимое просто отсутствуют.

Решили добавить еще одно поле для ввода файла, чтобы проверить как оно будет работать. Оно появляется нормально в поле Request.File. Странно. Решили изменить CSS и не прятать тэг для ввода файла. Опачки. Все заработало. Теперь Request.File содержит корректные данные.

Я не знаю с какого перепуга, но IE не передает данные на сервер, если элемент input невидим. Но его можно сделать прозрачным. Вот такой финт работает на ура:

.fileuploader input {cursor:pointer; height:30px; width:100px; 
  position:absolute; top:0; right:0; opacity:0.0; filter:alpha(opacity=0);}

Понравилось? Кликни Лайк, чтобы я знал, какой контент более интересен читателям. Заметку пока еще никто не лайкал и ты можешь быть первым