Как применить таблицу стилей к типу ввода = файлу для IE8 или как сделать текстовое поле типа ввода = файл доступным для одного клика в IE8

Я разрабатываю веб-сайт для IE8 (требование клиента), в котором я предоставляю функцию загрузки изображений. Используя CSS, я сделал кнопку просмотра (т. е. тип ввода = файл) в качестве изображения (изображение на задней панели и установил непрозрачность кнопки обзора на 0).

Поэтому всякий раз, когда пользователь нажимает на изображение, я хочу открыть всплывающее окно для загрузки файлов. Я прикрепил два изображения. Один с непрозрачностью 0 и один без непрозрачности.

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

В качестве обходного пути я добавил одну новую кнопку поверх input type=file, и в ее событии onclick я вызвал событие нажатия кнопки просмотра. Он открывает загрузчик файлов, но когда я публикую форму, изображение не загружается и завершается с ошибкой с кодом 4 (файл не загружается).

Есть ли способ сделать это одним щелчком мыши только в IE8. Во всех других браузерах он отлично работает только одним щелчком мыши.

Любые идеи?

Спасибо,

кнопка просмотра появится на html

кнопка просмотра действительно представлена


javascript html css internet-explorer-8 input-type-file
person SangamAngre    schedule 18.12.2012    source источник
comment
Этот вопрос похож на stackoverflow. ком/вопросы/3935001/ . Вкратце ответ заключается в том, что это может быть невозможно сделать в IE.   -  person Tanzeel Kazi    schedule 18.12.2012

Ответы (1)


arrow_upward
2
arrow_downward

Проверьте эту скрипку.

Клики, исходящие не от пользователя, не будут работать должным образом. Стилизация поля ввода файла не изменяет размер кнопки сверх установленного предела, поэтому вы можете использовать свойство масштабирования.

Я не уверен, как выглядит остальная часть вашего кода, но использование следующего CSS для родителя и ввода файла работает, поэтому вы можете настроить значения в соответствии со своими потребностями:

.uploadTrigger {
    height: 500px;
    width: 500px;
    background: url("http://i.stack.imgur.com/PTB47.png") center -20px;
    overflow: hidden;
    position: relative;
}
.uploadTrigger input[type="file"] {
    height: 50px;
    width: 50px;
    opacity: 1;
    cursor: pointer;
    zoom: 10;
    -moz-transform: scale(10) translate(22px, 22px);
    position: absolute;
    top: 0;
    left: 0;
}

Если вы попытаетесь изменить непрозрачность на 1, вы заметите, что кнопка занимает весь родитель, что позволяет вашему пользователю использовать один щелчок, чтобы открыть окно выбора файла.

Приведенный выше код был изменен, чтобы обеспечить согласованное поведение в IE9, Chrome(28) и Firefox(21). Если вы разрабатываете внутренний сайт и уверены, что требуется только поддержка IE8, вы можете убрать -moz-transform: scale(10) translate(22px, 22px);

Позже я протестирую его на IE8 и обновлю, если он окажется нефункциональным.

person godfrzero    schedule 18.07.2013