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

Question

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

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

<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>

该代码显示如下：

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

Answer 1

只需添加标签标签，然后将输入标签包装在标签内，然后隐藏输入并为其提供一个ID，该ID就会在标签上用作属性。

<label for="file">
  <i class="ion-images"></i>
  <input type="file" id="file" style="display: none" name="image" accept="image/gif,image/jpeg,image/jpg,image/png" multiple="" data-original-title="upload photos">
</label>