Комментарий: Недавно я использовал элемент управления загрузкой файла и обнаружил две проблемы совместимости элемента управления загрузкой файла: одна заключается в том, что управление загрузкой файла не может изменить ширину через CSS под Firefox, а другой заключается в том, что управление загрузкой файла выглядит иначе в разных браузерах. Эта статья предоставит подробное решение.
Недавно я использовал управление загрузкой файла при использовании Canvas для обработки пикселей изображения, и обнаружил две проблемы совместимости с управлением загрузкой файла. Одним из них является то, что управление загрузкой файла не может изменять ширину через CSS под Firefox, а другой заключается в том, что управление загрузкой файла выглядит по -разному в разных браузерах.Ниже приведен скриншот управления загрузкой файла в IE10, Firefox16, Chrome22, Opera12, Safari5.1.7:
В IE10 дважды щелкните поле ввода или нажмите кнопку, чтобы открыть поле выбора файла. Нажатие на поле ввода, кнопку или текст в других браузерах может запустить поле выбора файла.
Учитывая эту путаницу, необходимо объединить то же самое и поведение. Вот мое решение совместимости.
Давайте сначала посмотрим на скриншоты конечного результата в каждом браузере:
Основная идея: создайте поля ввода и кнопки для моделирования элементов управления загрузкой файлов. Установите элемент управления загрузкой файла для прозрачного. Сделайте управление загрузкой файла правой кнопкой с помощью кнопки, используемой для моделирования. Измените порядок укладки элементов, чтобы кнопки были ниже, элемент управления загрузкой файла находится в середине, а входная окно выше. После того, как выбор файла будет завершен, назначьте значение в управлении загрузкой файла на поле ввода, используемое для моделирования.
Принцип: в разных браузерах высота кнопки управления загрузкой файла настраивается, а правая сторона управления загрузкой файла можно нажать. Таким образом, регулируя высоту управления загрузкой файла и настраивая положение элемента управления загрузкой файла (выровненная правая), область кликабельной области управления загрузкой файла может быть полностью перезаписана с помощью кнопок, используемых для моделирования. Когда элемент управления загрузкой файла прозрачен, пользователь нажимает кнопку для моделирования, запускает поле выбора файла. Но в то же время в порядке укладки элементов управления загрузкой файлов не может предшествовать входной окно, используемой для моделирования. В противном случае, когда пользователь помещает мышь в окно ввода, вы можете увидеть, что курсор не указывает текст, а со стрелкой (и при щелчке ее как стрелку, окно выбора файла появится), и пользователь будет смущен.
Реализация: давайте сначала рассмотрим код в HTML -части.
<div>
<input type = "text" value = "file не выбран" /> <input type = "кнопка" value = "resse" /> <input type = "file" />
</div>
Тогда есть код для части CSS.
#файл {
позиция: относительно;
Ширина: 226px;
Высота: 25px;
Граница: 1px #99f твердый;
}
#file input {
размер шрифта: 16px;
поля: 0;
Заполнение: 0;
позиция: относительно;
Вертикальная атака: средняя;
Схема: нет;
}
#file input [type = "text"] {
Граница: 3PX Нет;
Ширина: 172px;
Z-Index: 4;
}
#file input [type = "button"] {
Ширина: 54px;
Высота: 25px;
Z-Index: 2;
}
#file input [type = "file"] {
позиция: абсолютно;
Справа: 0px;
Высота: 25px;
непрозрачность: 0;
z-index: 3;
}
Наконец, часть JavaScript используется для отображения пути файла, полученного управлением загрузкой файла в поле «Видимый вход».
window.onload = function () {
var file = document.queryselector ("#file input [type = 'file']");
var text = document.queryselector ("#file input [type = 'text']");
file.addeventListener ("Изменение", назначение, false);
function ussy () {
text.value = file.value;
}
}
Добро пожаловать, чтобы оставить сообщение для общения или исправления.