如何在输入字段type= " file "时添加引导工具提示

How to add Bootstrap Tool tips to a input field when its type=“file”

本文关键字：file 添加 工具提示 输入 字段 type      更新时间：2023-09-26

我尝试了以下代码，

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

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

Try

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

没有直接的方法来改变这一点，这里有一个例子，我发现在互联网上，它添加了一些custom css样式的file上传标签与自定义占位符/工具提示消息。

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

现场演示@ JSFiddle

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

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

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

IE专用演示@ JSFiddle

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(); });

您在title

中提到了值
title="It'stool tips"

var fileInputField = document.getElementById('fileField'); 
fileInputField.onchange = function() {
  fileInputField.setAttribute("data-original-title", this.files[0].name);
}
相关文章：