如何在 type=“file” 时将 Bootstrap Tool 提示添加到输入字段答案

【问题标题】：How to add Bootstrap Tool tips to a input field when its type=“file”如何在 type=“file” 时将 Bootstrap Tool 提示添加到输入字段
【发布时间】：2015-09-21 08:59:47
【问题描述】：

我尝试了以下代码，

<input type="file" name="file" id="fileField" data-toggle="tooltip" data-placement="bottom"/>

<script>
  $(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();   
  });
</script>

它执行后我得到了这个，

<input id="fileField" type="file" data-placement="bottom" data-toggle="tooltip" name="file" data-original-title="" title="">

通常我们添加一个标题属性来获得一个简单的工具提示。但在下面的示例中，我们得到了一个没有标题属性的简单工具提示。每当我们选择不同的文件时，它都会更新。我需要这些工具提示作为引导工具提示，并且每当我通过“选择文件”按钮选择不同的文件时都需要更新。 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_file

【问题讨论】：

您是否尝试阅读 Bootstrap 文档？
是的，试过了。但问题是这些文件类型输入字段没有使用 Bootstrap FileStyle (markusslima.github.io/bootstrap-filestyle) 重新命名。我现在不允许改变它。需要找到解决方法来解决此问题。谢谢。
它们是否有样式并不重要，它只是一个input 元素。遵循文档，它将起作用。
@anshu，使用bootstrap-filestyle 可以使用简单的input 标签，只需确保在脚本中也包含bootstrap-filestyle 库
可能是我问问题的方式有点令人困惑。所以我稍微改了一下。谢谢

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-tooltip

【解决方案1】：

试试

<input type="file" name="file" id="fileField" data-toggle="tooltip" data-placement="bottom" title="No file selected"/>

<script type="text/javascript">
$(document).ready(function(){ 
     $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

更改标题：

<script type="text/javascript">
   $(function() {
        $("fileField").change(function (){
          $("fileField").attr("title", "new Title Text");
   });
</script>

【讨论】：

【解决方案2】：

没有直接的方法可以改变这一点，这是我在互联网上找到的一个示例，它使用自定义占位符/工具提示消息向 file 上传标签添加了一些 custom css 样式。

HTML：

<div class="browse-wrap">
  <div class="title">Choose a file to upload</div>
  <input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path"></span>

CSS 代码：

input.upload {
    right:0;
    margin:0;
    bottom:0;
    padding:0;
    opacity:0;
    height:300px;
    outline:none;
    cursor:inherit;
    position:absolute;
    font-size:1000px !important;}

Live Demo @ JSFiddle

注意：Internet Explorer 9 及更早版本不支持 files 属性。

对于 IE 9 或之前的版本，使用下面的代码来获取选定的文件名。

(this.value).split("\\")[2]

IE specific demo @ JSFiddle

【讨论】：

我想要做的是在 span 标签中添加一个引导陷阱工具提示（在你的 JSFiddle 中）。工具提示内容应该是所选文件名的名称。
当前upload-path span 确实包含所选文件的名称
现在的问题是 this.files[0].name 在 IE 上不起作用。但 FF 工作正常。有没有解决的办法？（我用来解决问题的代码在下面注释为答案）谢谢。
@Anshu: files 不支持 IE 9 或之前的版本，所以它不起作用。无论如何，我在我的答案中添加了相同的解决方法，检查一下
如果我尝试上传位于“C:\Users\test\Pictures\Training.jpg”中的文件，我会在系统中得到“test”作为输出。但是由于某种原因，如果我尝试在您的 JSFiddle 中上传相同的文件，它会给出“Training.jpg”。有什么特别的原因吗？

【解决方案3】：

HTML 代码

<input type="file" name="file" id="fileField" data-toggle="tooltip" data-placement="bottom" title="Tooltip on Bottom" />

Javascript

$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); });

【讨论】：

【解决方案4】：

你在标题中提到了值

title="It'stool tips"

【讨论】：

【解决方案5】：

var fileInputField = document.getElementById('fileField'); 

fileInputField.onchange = function() {
  fileInputField.setAttribute("data-original-title", this.files[0].name);
}

【讨论】：