Почему это работает на всех других браузерах, кроме Opera?

Question

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

Работает в ie7 ie8 ie9 Firefox, Safari, Chrome, но не в Opera.В Opera появляется обычный файл ввода.

Я знаю, что есть множество скриптов, которые делают похожие вещи, но они слишком сложны для меня, чтобы понять, как их использовать (например, uploadify), или они делают подобные вещи.но не так хорошо, как если бы пользовательское изображение было того же размера, что и входной файл (с этим тоже есть проблемы).

Вот сценарий, который я использую - нетмного к этому

Почему это не работает в Opera.Есть ли способ это исправить?Это идеально для того, что я хочу, за исключением того, что я не работаю в Opera.

Answer 1

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

Чтобы обойти это и заставить скрипт работать, вы можете сделать следующее:

1. Сначала удалите или изменитеOpera нюхает, что отключает скрипт.Найдите это:

   if (window.opera ||

   и удалите window.opera ||.

2. Добавьте небольшой обходной путь, который изменит расположениевводите файл и не размещайте его так далеко налево, что часть текстовой области скрыта, а прозрачность игнорируется. Перед этим:

   this.file.style.left = x - (w - 30) + 'px ';

   Добавьте эту строку:

   if (window.opera && parseFloat (opera.version ())> 11.50 && (x- (w-30) <0)) w =w / 2; </p>

Я ограничил его запуск только в Opera и только в версии 11.50 и выше. Причина в том, что большинство старых версий Opera не открывают диалоговое окно файла, если вынажмите на часть «Ввод текста». В версиях Opera меньше 11.50 вы получите отображение глючного кода (но функциональность будет работать).

Надеюсь, это поможет вам обойти ошибку. Будь то будущееДоказательство: я понятия не имею. В файле могут появиться некоторые изменения в будущем.

Answer 2

Я немного поиграл с вашим примером ( SI.Files и пример ) и попытался найти причину, по которой он не работает (хорошо) в Opera. Вот результат моего «исследования»:

• Проверка if (window.opera ||... является причиной, по которой функциональность блокируется вообще. Если вы удалите это ...
• Затем вы получаете движущееся изображение (ранее) скрытой кнопки, которая накладывается на изображение, которое вы хотите показать.
• Если вы полностью удалите функцию elem.parentNode.onmousemove = function(e) {...}, кнопка не будет отображаться, но курсор не отображается в Chrome, ... и в Opera, в качестве курсора теперь вы видите курсор панели для поля ввода. 1012 *
• Если нажать «кнопку», вызывается функция для диалога загрузки.

Возможно, вам стоит взглянуть на вопрос "Стилизация кнопки ввода = кнопка" file "" со ссылками на рабочие решения:

• http://www.quirksmode.org/dom/inputfile.html
• http://blog.vworld.at/2008/08/21/styling-an-input-typefile-using-jquery/ (если вам подходит jquery)