Я пытаюсь смоделировать асинхронную загрузку файла с помощью iframe. Вот моя разметка:
<form method="POST" enctype="multipart/form-data" name="change-avatar" action="/dyn/actions/upload?type=profile" target="target-upload">
<input type="file" name="change-avatar-input" style="position: absolute; z-index: 999; cursor: pointer; left: 10px; top: 57px; width: 147px; height: 23px; opacity: 0;"/>
<div style="position: absolute; z-index: 1000; cursor: pointer; left: 10px; top: 57px; width: 147px; height: 23px; opacity: 0;"/>
</form>
<button id="avatar-src" class="browse-button" type="button">Select File to Upload</button>
Я взял обычную кнопку и поместил поверх нее тип ввода = файл и установил непрозрачность на 0. Этот ввод подчиняется скрытому фрейму. Проблема заключается в том, что при вводе файла создается неожиданный курсор (ожидается, что он является указателем), и его невозможно надежно стилизовать. Я решил эту проблему, поместив еще один div 0 opacity поверх входного файла 0 opacity и стилизовав его так, чтобы получить правильный курсор. Затем я установил обработчик событий, чтобы обнаруживать щелчок по div с непрозрачностью 0, который, в свою очередь, программно вызывает событие onclick при вводе файла с помощью click ().
Проблема в том, что object.click () не поддерживается в Firefox (работает, как и ожидалось, т.е.).