如何在 HTML/Bootstrap 的 <li> 标记内添加文件输入（浏览）功能？答案

【问题标题】：How do I add file input (browse) functionality inside <li> tag in HTML/Bootstrap?如何在 HTML/Bootstrap 的 <li> 标记内添加文件输入（浏览）功能？
【发布时间】：2018-01-24 00:20:32
【问题描述】：

我正在努力获得一个带有图标和链接标签 (<a>) 的 <li> 来充当浏览按钮，从而成为文件的输入。

我原来拥有的东西：

<ul>

 <li><a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Video Media"><i class="fa fa-video-camera"> </i></a></li>
<li>  <a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Photos" ><i class="fa fa-picture-o"></i></a>  </li> 

</ul>

它看起来像这样：

Original snapshot

我尝试在几个位置插入<input type=”file”> </input>，但没有成功，而是在我的图标顶部获得了“选择文件”按钮，我要做的不是显示“选择文件”按钮而是有我的图标按钮显示为它。

尝试失败的代码（仅适用于照片<li>图标）：

<ul>

 <li><a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Video Media"><i class="fa fa-video-camera"> </i></a></li>
<li>  <a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Photos" ><input id="upload-file" type="file"><i class="fa fa-picture-o"></i></a>  </li> 

</ul>

结果是：

Failed try snapshot

谢谢

【问题讨论】：

我可以查看您的整个代码（HTML、CSS）吗？
你不要把<li>变成一个按钮。它在功能上或语义上都不正确，甚至不可能！
@Rob ，我重新表述了这个问题，我假设您基于此否决了我的问题？
不，但我不知道为什么我投了反对票，所以我会删除它。
谢谢，我知道我最初的措辞有点奇怪

标签： html twitter-bootstrap frontend web-deployment

【解决方案1】：

#upload-file{
  display: none;
}

label[for=upload-file]{

}

<ul>

 <li>
   <a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Video Media">
     <i class="fa fa-video-camera"> </i>
   </a>
 </li>
 <li>  
   <a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Photos" >
     <input id="upload-file" type="file">
     <label for="upload-file">
       <i class="fa fa-picture-o"></i>
     </label>
   </a>  
 </li> 

</ul>

【讨论】：

@HMA 很高兴为您提供帮助。

【解决方案2】：

这就是你需要的

html

<input id="upload" type="file"/>
<a href="" id="upload_link">Upload your photo</a>

css

#upload{
   display:none
}

$(function(){
    $("#upload_link").on('click', function(e){
        e.preventDefault();
        $("#upload:hidden").trigger('click');
    });
});

见Example

【讨论】：