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

【问题标题】：Open file upload dialog on click of an icon单击图标打开文件上传对话框
【发布时间】：2018-12-09 11:29:28
【问题描述】：

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

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

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

该代码显示如下：

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

【问题讨论】：

标签： html

【解决方案1】：

只需添加一个标签标签并将输入标签包装在标签内并隐藏输入并给它一个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>

【讨论】：

请告诉我多想，？我在上传视频时遇到问题
如果输入元素在标签内，您可以删除for="..."。
如果您正在寻找 react 中的解决方案，请在标签中使用 htmlFor 属性并确保 htmlFor 和输入 id 具有相同的名称。