Как с помощью JS объеденить видимую ссылку и скрытую форму
 

Всем привет! Подскажите, как сделать, чтобы при нажатии на кнопку загрузить фотографию, срабатывала кнопка "Обзор"

<a class="add_photos " href="#">
<i class="glyphicon glyphicon-picture"></i>
Загрузить фотографии
</a>

<form class="upload-form" style="display: none;" data-type="upload"  enctype="multipart/form-data" method="POST">
<span class="file-wrap">
<input class="file" type="file" multiple="" accept="image/jpeg" name="file">
</span>
</form>

Например, так:

document.querySelector(".add_photos").onclick = function () {
    document.querySelector(".file").click();
};

Только в опере по "display:none"-элементам так не кликнешь. Но можно скрыть форму, сдвинув её за экран влево. Может ещё в каких браузерах нюансы есть.