html - CSS：文件输入 - 定位显示“未选择文件”的文本

Question

我有一个使用 Bootstrap 3 的表单。我想要一个比浏览器默认样式更好的文件输入。

如何定位显示“未选择文件”的文本？我想垂直居中。

Answer 1

使用 div 分配给文件输入： HTML ：

<input type="file" name="the_file" style="display:none;" />
<div style="cursor: pointer; display: inline-block; padding:5px; background: #eeeeee;" id="file-browse" >choose file</div>

JS/jQuery：

$('#file-browse').click(function(){
 $fileInput = $('input[name=the_file]');

 var myFile;
 $fileInput.click();
 $fileInput.change(function(e)
 {
  myFile = e.target.files[0];
  console.log(myFile);
 });
});