更改input type="file"中的默认文本？

Question

更改input type="file"中的默认文本？

htmlfileinputdefault-value

308

我想更改在使用 input="file" 时，按钮上的默认文本为 "选择文件"。

输入图像描述

我该如何做？另外，正如您在图像中看到的，按钮位于文本的左侧。我该如何将它放在文本的右侧？

- Harry Joy

有没有选项可以将这个文本存储到变量中？ - kicaj

2

这里ParPar的回答可能是你要找的：https://dev59.com/yXI-5IYBdhLWcg3wQV8Z。 - Aniket Suryavanshi

可能是如何重命名input type=file的HTML“浏览”按钮？的重复问题。关于样式的一般性问题：https://dev59.com/dXRB5IYBdhLWcg3wn4UL - Ciro Santilli OurBigBook.com

尝试这个解决方案：http://stackoverflow.com/a/30275263/1657573 - Michael Tarimo

可能是重复的问题：如何更改<input type="file"/>按钮文本？ - Bae

24个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Mikula · Answer 1

通过这个问题的答案, 我解决了许多评论中提到的问题，即它没有显示用户选择了多少个文件。

<label for="uploadedFiles" class="btn btn-sm btn-outline-primary">Choose files</label>
<input type="file" name="postedFiles" id="uploadedFiles" multiple="multiple" hidden onchange="javascript:updateList()" />
<input class="btn btn-primary mt-2 btn-action" type="submit" value="Send" formmethod="post" formaction="@Url.Action("Create")" /><br />
<span id="selected-count">Selected files: 0</span>
<script>
    updateList = function () {
        var input = document.getElementById('uploadedFiles');//list of files user uploaded
        var output = document.getElementById('selected-count');//element displaying count
        output.innerHTML = 'Selected files: ' + input.files.length;
    }
</script>

您可以轻松通过显示文件名称或任何您希望做的方式来改进它，但我想要的只是告知用户他们已经选择了文件。

- Tanner Davison · Answer 2

在JavaScript中，你可以给输入元素添加一个'title'属性，例如：

- ADAMJR · Answer 3

自定义输入文本（无需使用jQuery）

如果您想使用原生JavaScript自定义文件选择按钮的文本，可以使用以下代码片段：

document.querySelector("#files").onchange = function() {
  const fileName = this.files[0]?.name;
  const label = document.querySelector("label[for=files]");
  label.innerText = fileName ?? "Browse Files";
};

label {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 5px 10px;
  font-family: 'Helvetica', sans-serif;
  transition: .5s;
}

label:hover {
  background-color: #eee;
}

<div class="input_container">
  <label for="files" class="btn">Browse Files</label>
  <input id="files" style="display:none;" type="file">
</div>

如果你想要给文件选择按钮添加样式，我有一个解决方案：如何为input type="file"按钮添加样式。

- Bruno Ribeiro · Answer 4

你可以使用一个简单的按钮并隐藏输入文件

使用jquery和bootstrap：

HTML代码

<button class="btn btn-white" id="btn-file" type="button"><i class="fa fa-file-pdf"></i> Anexar Documento</button>
<input name="shutdown" id="input-file" type="file" class="form-control hidden" accept="application/pdf, image/png, image/jpeg">

CSS：

.hidden{display:none}

JS：

$("#btn-file").click(function () {
    $("#input-file").trigger('click');
});

$("#input-file").change(function () {
    var file = $(this)[0].files[0].name;
    $("#btn-file").html('<i class="fa fa-file-pdf"></i> ' + file);
});