更改“未选择文件”：答案

【问题标题】：Change the "No file chosen":更改“未选择文件”：
【发布时间】：2013-04-06 18:21:36
【问题描述】：

我有一个“选择文件”按钮如下（我用的是Jade但是应该和Html5一样）：

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

在浏览器中，这会显示一个按钮，旁边有一个文本“未选择文件”。我想将“未选择文件”文本更改为其他内容，例如“未选择视频”或“请选择视频”。我在这里遵循了第一个建议：

I don't want to see 'no file chosen' for a file input field

但是这样做并没有改变文本：

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

谁能帮我找出问题所在？

【问题讨论】：

在这里找到答案stackoverflow.com/questions/12035400/…
@MahmoudFarahat 我不想删除它，我想更改文本
不能去掉文字，在旁边放一个占位符标签吗？
在另一篇文章中有一个非常简洁的答案。 stackoverflow.com/a/21842275/3653494
很有可能：查看这个快速解决方案——包括其他内容，只需滚动到 CSS 底部：w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7

标签： html button file-upload pug

【解决方案1】：

用css隐藏输入，添加标签并将其分配给输入按钮。标签是可点击的，点击后会弹出文件对话框。

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

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

【讨论】：

这甚至适用于 IE9，您无法隐藏 file input 并从 JavaScript 中单击它。谢谢！
这很棒。黑客优雅。喜欢它。
很好的解决方案，这应该是公认的答案。
很棒的解决方案，它甚至可以轻松自定义字段
有趣的 html 解决方案，但不利于可用性。用户将始终看到“选择文件”或等效项，即使在选择文件之后也是如此。

【解决方案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 和 not visibility:hidden 使文件元素不可见，这样它就不会创建空白空间。

享受编码

【讨论】：

这样拖拽文件好像不行。

【解决方案3】：

我很确定您不能更改按钮上的默认标签，它们在浏览器中是硬编码的（每个浏览器都以自己的方式呈现按钮标题）。看看这个button styling article

【讨论】：

不是按钮上的标签，是旁边的“未选择文件”。当我选择一个文件时，它会从 No file selected 变为 fileName.something。所以我认为它应该是可变的。
@FranXh 除非您更改 css 类属性，否则不可能。

【解决方案4】：

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

【讨论】：

【解决方案5】：

是的，即使您有一个预上传文件列表，也无法删除此“未选择文件”。

我找到的最简单的解决方案（适用于 IE、FF、CR）如下

隐藏您的输入并添加“文件”按钮
然后调用'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;'>

完成了，完美运行:)

弗雷德

【讨论】：

【解决方案6】：

$(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">

【讨论】：

这非常有效，它将隐藏文件输入附近的文本。

【解决方案7】：

但是如果你尝试移除这个工具提示

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

这行不通。这是我的小技巧，尝试使用空格的标题。它会起作用的。:)

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

【讨论】：

我在 chrome 和所有浏览器中进行了测试。它工作正常。能否请您测试并验证。
在 Chrome、Safari、Firefox 中再次测试。它不起作用。
我签入了 chrome 版本 56.0.2924.87，它运行良好。你用的是哪个版本？@PantsMagee
它只是添加了带有您在title 属性中设置的文本的工具提示，如我所见

【解决方案8】：

HTML

  <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 修复它。

【讨论】：

【解决方案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>

【讨论】：

【解决方案10】：

 .vendor_logo_hide{
      display: inline !important;;
      color: transparent;
      width: 99px;
    }
    .vendor_logo{
      display: block !important;
      color: black;
      width: 100%; 
    }

$(document).ready(function() {
  // set text to select company logo 
  $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
  // on change
  $('#Uploadfile').change(function() {
    //  show file name 
    if ($("#Uploadfile").val().length > 0) {
      $(".file_placeholder").empty();
      $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
      console.log($("#Uploadfile").val());
    } else {
      // show select company logo
      $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
      $("#Uploadfile").after("<span class='file_placeholder'>Select  Company Logo</span>");
    }

  });

});

.vendor_logo_hide {
  display: inline !important;
  ;
  color: transparent;
  width: 99px;
}

.vendor_logo {
  display: block !important;
  color: black;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>

<div>
  <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>

【讨论】：

如何让文本“选择公司徽标”显示在按钮下方而不是右侧？？

【解决方案11】：

这样的东西可以工作

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

【讨论】：

【解决方案12】：

你可以这样试试：

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
 <span id='button'>Select File</span>
</div>

显示选中的文件：

$('#button').click(function () {
    $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function () {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
    $('.customform-control').hide();
})

感谢@unlucky13 获取选定的文件名

这是工作小提琴：

http://jsfiddle.net/eamrmoc7/

【讨论】：

【解决方案13】：

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

&lt;input type="file"&gt;

如果要在按钮后显示文字，请使用after

【讨论】：

【解决方案14】：

<div class="field">
    <label class="field-label" for="photo">Your photo</label>
    <input class="field-input" type="file" name="photo"  id="photo" value="photo" />
</div>

和css

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}

【讨论】：

输入[type="file"]{ 颜色：透明；背景颜色：#F89406；边框：2px 实心#34495e；宽度：100%；高度：36px；边框半径：3px； }

【解决方案15】：

只需更改输入的宽度。大约 90 像素

<input type="file" style="width: 90px" />

【讨论】：

它很简单而且工作正常。只是宽度是100px； :)

【解决方案16】：

这将帮助您更改“没有文件选择选择个人资料图片”的名称

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

【讨论】：

按钮不见了。
这对我来说效果很好。按钮不见了，但单击标签打开文件打开对话框，您可以设置标签样式以使其看起来像按钮。它摆脱了烦人的“未选择文件”文本。

【解决方案17】：

我尝试了所有技巧，但似乎没有任何效果，只是导致将带有 CSS 颜色属性的文本隐藏到#fff，因为我的背景是#fff。这是代码：

<input class="form-control upload_profile_pic" 
   type="file" 
   name="userfile" class="form-control" 
    style="color: #fff;">

或

input.form-control.upload_profile_pic {
    color: #fff;
}

【讨论】：

【解决方案18】：

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

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

&lt;input type="file"/&gt;

【讨论】：

【解决方案19】：

我会使用“按钮”而不是“标签”，希望这对某人有所帮助。

这只会显示一个按钮，用户点击会弹出文件选择器，文件选择后自动上传。

<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>

<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />

<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />

【讨论】：

【解决方案20】：

你可以使用下面的css代码来隐藏（没有选择文件）

HTML

<input type="file" name="page_logo" id="page_logo">

CSS

input[type="file"]:after {color: #fff}

确保颜色与背景颜色匹配

【讨论】：

【解决方案21】：

有一个很好的例子（包括文件类型验证）：

https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html

这基本上是阿莫斯使用按钮的想法的充实版本。

我尝试了上面的几个建议都没有成功（但也许这就是我）。

我将其重新用于使用

进行 Excel 文件转换

  <form>
    <div>
      <label for="excel_converts">Choose a spreadsheet to convert.</label>
      <input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
    </div>
    <div class="preview">
      <p>No spreadsheet currently selected for conversion</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>

【讨论】：

所以这被否决了，为什么？也许是因为在一篇完全不相关的帖子中，我建议下意识地投反对票很容易，但建设性却不那么容易？