更改"未选择文件":

Question

我有一个按钮"选择文件"如下(我使用Jade但它应该与Html5相同):

 input(type='file', name='videoFile')

在浏览器中,它显示一个按钮,旁边有一个文本"未选择文件".我想将"无文件选择"文本更改为其他内容,例如"没有选择视频"或"请选择视频".我在这里遵循了第一个建议:

我不想在文件输入字段中看到"没有选择文件"

但这样做并没有改变文字:

 input(type='file', name='videoFile', title = "Choose a video please")

任何人都可以帮我找出问题所在？

Answer 1

使用css隐藏输入,添加标签并将其指定给输入按钮.标签将是可点击的,单击时,它将启动文件对话框.

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

然后根据需要将标签设置为按钮.

Answer 2

试试这只是一个技巧

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

这个怎么运作

这很简单.Label元素使用"for"标记通过id引用表单的元素.在这种情况下,我们使用"img"作为它们之间的参考键.完成后,无论何时单击标签,它都会自动触发表单的元素单击事件,这是我们案例中的文件元素单击事件.然后,我们使用display:none而不是visibility:hidden使文件元素不可见,这样它就不会创建空白空间.

享受编码

Answer 3

http://jsfiddle.net/ZDgRG/

见上面的链接.我使用css来隐藏默认文本并使用标签来显示我想要的内容:

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

input[type=file]{
    width:90px;
    color:transparent;
}

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

Answer 4

是的,即使你有一个预上传文件列表,也无法删除这个'无文件选择'.

我发现的最简单的解决方案(适用于IE,FF,CR)如下

1. 隐藏您的输入并添加"文件"按钮
2. 然后调用'files'按钮并让他绑定fileupload(我在这个例子中使用JQuery)

$('.addfiles').on('click', function() { $('#fileupload').click();return false;});

<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

它完成了,完美地工作:)

弗雷德

Answer 5

我很确定你无法更改按钮上的默认标签,它们在浏览器中是硬编码的(每个浏览器都以自己的方式呈现按钮标题).看看这个按钮造型文章

Answer 6

以下内容将删除“未选择文件”文本，但保留“选择文件”伪按钮不变。与此处的其他技术不同，这对可访问性的影响应该很小。

input[type='file'] { font-size: 0; }
::file-selector-button { font-size: initial; }

<input type="file"/>

Answer 7

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})

input[type="file"]{
    color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

Answer 8

但是,如果您尝试删除此工具提示

<input type='file' title=""/>

这不行.这是我的小技巧,用空格尝试标题.它会工作.:)

<input type='file' title=" "/>

Answer 9

使用已更改标签文本的标签

<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>

添加jQuery

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>

Answer 10

超文本标记语言

  <div class="fileUpload btn btn-primary">
    <label class="upload">
      <input name='Image' type="file"/>
    Upload Image
    </label>
  </div>

CSS

input[type="file"]
{
  display: none;
}
.fileUpload input.upload 
{
    display: inline-block;
}

注： Btn btn-primary 是一类引导按钮。然而，该按钮的位置可能看起来很奇怪。希望你能通过内联CSS修复它。

Answer 11

input[type=file] {
      color: transparent !important;
  }
input[type=file]::before {
    content: "Attach Your CV: ";
    color: black;
    margin-right: 10px; 
}

<input type="file">

如果您想在按钮后显示文本，请使用，after