Как отобразить браузер файлов с помощью щелчка по тексту и сделать так, чтобы курсор мыши менялся на указатель при наведении текста - PullRequest
Новая
       3

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

1 голос
/ 13 января 2012

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

Я исключил привязку слушателя к событию click в моей ссылке и имитации события click в поле файла моей формы, потому что я прочитал, что Safari не поддерживает программный щелчок на входе [type = file].

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

Кто-нибудь имеет представление о другом подходе, который я мог бы использовать, чтобы курсор изменился на указатель при наведении на мою ссылку? Моя лучшая ставка будет идти с чем-то, как у них на http://www.uploadify.com/?

EDIT

Чтобы объяснить немного лучше, у меня есть файл ввода на моей странице: 

<div class="logo_file">
    <input id="logo_file_field" type="file">
</div>

С этим css: 

.logo_file {
    position: absolute;  /* this element's parent has position: relative */
    top: -65px;
    left: 0;
    width: 175px;
    overflow: hidden;
    cursor: pointer;
}
input#logo_file_field {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
}

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

<div class="logo_link_wrap">
    <a id="logo_change_link">Change Photo</a>
</div>

Который имеет этот CSS: 

.logo_link_wrap {
    margin-top: 38px;
    cursor: pointer;
}

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

Ответы [ 3 ]

2 голосов
/ 13 января 2012

Эта ссылка должна быть полезной для вас: http://www.quirksmode.org/dom/inputfile.html

0 голосов
/ 13 января 2012

Проблема в том, что вы помещаете поле ввода поверх ссылки и делаете поле ввода невидимым, используя opacity:0;. Но поле ввода все еще там и блокирует доступ курсора к ссылке. Не лучше ли заменить непрозрачность на display:none?

С помощью display:none вы скрываете поле ввода и удаляете его из потока. Я предполагаю, что вы хотите, чтобы ссылка использовалась для активации функции загрузки поля ввода, и я также предполагаю, что вы знаете, как это сделать.

0 голосов
/ 13 января 2012

Попробуйте обернуть входной тег в тег привязки 

<a href="#"><input type="file" ... /></a>
...