тип ввода = файл, прикрепленный к событию onclick

Question

У меня есть такое меню:

<ul class="sub">
    <li><a href="#">New</a></li>
    <li><a href="#">Open</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Help</a></li>
</ul>

и я бы хотел прикрепить клик даже к Open li, который бы открывал диалог открытия файла, как input type="file". Я могу обработать прикрепление кода к событию onclick, но я не знаю, какой код прикрепить.

ТИА

Answer 1

Вы можете добавить нормальный input type="file" на страницу и стилизовать его, чтобы скрыть. Как то так:

<input type="file" id="theFileInput" style="display:none;" />

(Только для этого примера используется встроенный стиль, я, конечно, рекомендую отделить стиль от разметки.)

Затем вы можете инициировать щелчок по нему в ответ на событие щелчка по целевому элементу. С помощью jQuery (при условии, что вы можете установить id на li или каким-либо другим способом однозначно идентифицировать его в селекторе), это будет что-то вроде:

$('#clickableLiElement').click(function() {
    $('#theFileInput').click();
});

input type="file" все еще там и может взаимодействовать, как и любой другой элемент формы. Это просто невидимо для пользователя. Но это приведет к открытию диалогового окна «Открыть файл» и установлению его значения для элемента в обычном режиме, который обычно может быть включен в POST для сервера.

Answer 2

With JavaScript 

<input type="file" accept="images/*" name="images" id="images" onClick="showModal()" style="display:none"/>
<script>
    function showModal(){
        document.getElementById('images').click();
    }
</script>
<li onClick="showModal()"></li>

Answer 3

Ответ выше (Дэвид) работает, но в вашем файле CSS вам нужно сделать:

opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);

Решение display:none не работает с Chrome или Safari.