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

Question

我正在努力让 <li> 带有图标和 link 标签 (<a>) 作为浏览按钮，因此成为文件的输入。

我原来有：

<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>，但没有用，相反我在图标顶部得到了 "Choose file" 按钮，我不想做的是不显示 "choose file" 按钮，而是显示我的图标按钮。

尝试失败代码（仅适用于照片<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

谢谢

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

Answer 2

这就是你需要的

html

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

css

#upload{
   display:none
}

js

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

见Example

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

How do I add file input (browse) functionality inside <li> tag in HTML/Bootstrap?

html

frontend

web-deployment

twitter-bootstrap