单击图标打开文件上传对话框

我希望能够在用户单击图标而不显示文件输入元素时打开文件上传对话框。

我有以下带有图标和文件输入元素的代码：

<div class="col-md-5 col-sm-5">
    <div class="tools">
        <ul class="publishing-tools list-inline">
            <!--<li><a href="#"><i class="ion-compose"></i></a></li>-->
            <li><a href="#"><i class="ion-images">
                <input type="file" name="image" accept="image/gif,image/jpeg,image/jpg,image/png" multiple="" data-original-title="upload photos">
            </i></a></li>
            <li><a href="#"><i class="ion-ios-videocam">
                <input type="file" name="video" accept="video/mp4,video/x-m4v" multiple="" data-original-title="upload video" >
            </i></a></li>
            <!-- <li><a href="#"><i class="ion-map"></i></a></li>-->
        </ul>
        <button class="btn btn-primary pull-right" name="btn_publish">Publish</button>
    </div>
</div>

该代码显示如下：

单击图标时，如何隐藏文件输入元素并激活与每个图标对应的文件对话框？