Стилизовать ввод файла так, чтобы он выглядел как изображение - PullRequest
Новая
       8

Стилизовать ввод файла так, чтобы он выглядел как изображение

0 голосов
/ 28 октября 2011

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

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

Это все очень хорошо, но в IE7 есть проблема, когда вы можете ввести текст непосредственно в текстовое поле ввода файла. Кроме того, вы ограничены тем, чтобы иметь изображение того же размера, что и эти входные данные.

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

Однако я только что обнаружил, что это решение не работает для Opera. И я понятия не имею, почему.

Я был на этом весь день и не могу придумать других слов в Google по этому поводу. Может кто-нибудь сказать мне, как это исправить для оперы или даже если есть подобное решение (где вы можете иметь изображение 95x95px) вокруг?

1 Ответ

1 голос
/ 28 октября 2011

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

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

Другая вещь, которую вы можете сделать, это сделать код на основе браузера. Если он работает (с помощью второго метода) на всем, кроме Opera, может захотеть придерживаться его, затем использовать JS и использовать по умолчанию метод непрозрачности 0%, когда он равен opera).

К сожалению, я не знаю, какие у вас есть варианты.

...