Ноябрь 05, 2012
Стилизация file-input и проблема с политикой безопасности IE

В одном проекте понадобилось стилизовать инпут типа file. На скорую руку был реализован такой вариант: поверх инпута помещался div с нужным фоном, и при клике на него с помощью jQuery вызывался клик по настоящему полю типа file:

<style type="text/css">
    .file-area {
        position: relative;
        width: 250px;
        height: 50px;
    }
    .fake-file {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: url("file-background.png")
    }
</style>
<form method="post">
    <div class="file-area">
        <input type="file" name="file" class="file-field" />
        <div class="fake-file"></div>
    </div>
    ...
</form>
<script type="text/javascript">
    $(".fake-file").click(function() {
        $(".file-field").click();
    })
</script>

Такой вариант позволял ставить в качестве декорации файл-инпута картинку любого размера, всё работало в таких браузерах, как Firefox, Opera, Chrome. Однако в IE при попытке сделать submit формы, которая содержала стилизуемый инпут, возникала ошибка "Access is denied".

После поиска информации по данной теме, выяснилось, что причиной ошибки является политика безопасности IE. В частности, IE не позволяет манипулировать полем типа file при помощи javascript. И если javascript используется для того, чтобы установить путь к файлу в поле типа file, или событие click для показа диалога выбора файла вызывается из javascript, то IE не позволит сделать submit формы. Таким образом, стало понятно, что текущее решение не подходит.

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

Решение с прозрачным инпутом описывалось не раз. Например, вот хорошие статьи на эту тему:
Стилизация файл-инпутов
Стилизация файл-инпутов (input type=file)
Теги: ,
Добавить комментарий:
Комментариев: (2)
Рейтинг: 0 Опубликовал Russimus 3593 дн. назад
Не нравится Нравится
IE в своем стиле, а так к коду бы добавить фон в клеточку, и было бы шикарно....
Рейтинг: 0 Опубликовал массаж 1988 дн. назад
Не нравится Нравится
Массаж на дому http://massage-relaks.ru/catalog/Massazh-na-domu Эротический массаж http://massage-relaks.ru/catalog/erotic-massage Массажист http://massage-relaks.ru/catalog/Massazhist массаж в бане сауне http://massage-relaks.ru/catalog/massazh-v-bane-saune целительство http://massage-relaks.ru/catalog/celitelstvo здоровья http://massage-relaks.ru/catalog/zdorovya красота http://massage-relaks.ru/catalog/krasota похудения http://massage-relaks.ru/catalog/pohudeniya спа http://massage-relaks.ru/catalog/spa Знакомства http://massage-relaks.ru/catalog/znakomstva Курсы для девушек http://massage-relaks.ru/catalog/kursy массаж метро Авиамоторная http://massage-relaks.ru/catalog/Aviamotornaya массаж метро Автозаводская http://massage-relaks.ru/catalog/Massazh-metro-Avtozavodskaya
Опубликовать