更改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个回答

92

我认为这就是你想要的：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>

- 1Cr18Ni9

11

到目前为止，这是最佳解决方案。 - Ângelo Polotto

1

这也处理键盘导航。为了使它完美，使用 tabindex="-1" 在隐藏的文件输入上跳过它而不是使用 Tab 键。 - Marcel

这里需要注意一点：如果<button>标签位于<form>标签内部，那么该按钮将被视为“提交”按钮。这可能不是期望的行为！为了解决这个问题，只需在<button>标签中添加type属性<button type="button">。 - undefined

64

每个浏览器都有自己的控件呈现方式，因此您无法更改控件的文本或方向。

如果您想要一个基于HTML/CSS的解决方案而不是基于Flash或者Silverlight的解决方案，则可以尝试一些“小技巧”。

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

个人认为，由于大多数用户坚持使用他们首选的浏览器，并且因此可能习惯于在默认呈现中看到控件，如果他们看到不同的东西（取决于您处理的用户类型），他们可能会感到困惑。

- Shiv Kumar

37

这可能会在将来帮助到某些人，您可以根据自己的喜好为输入标签设置样式，并在其中放置任何想要的内容，然后通过“display none”隐藏输入标签。

在 iOS 上使用 cordova 完美运行。

<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<label for="imageUpload" class="btn btn-primary btn-block btn-outlined">Seleccionar imagenes</label>
<input type="file" id="imageUpload" accept="image/*" style="display: none">

- Paulo Mogollón

22

为了实现这一点，必须使用 display:none CSS 属性隐藏默认输入按钮，并添加一个新的按钮元素来替换它，以便我们可以根据需要进行自定义。

使用 Bootstrap

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 
Optional text here 

<label for="inputField" class="btn btn-info">Try me</label>
<input type="file" id="inputField" style="display:none">

使用jQuery

在这种情况下，添加到按钮元素的onclick属性指示JavaScript在单击可见按钮时点击隐藏的默认输入按钮。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Optional text here 

<button style="cursor:pointer" onclick="$('#inputField').click()">Click me</button>
<input type="file" id="inputField" style="display:none">

使用事件监听器的纯JavaScript

document.getElementById('btn').addEventListener('click', () => { 
  document.getElementById('inputField').click();
})

Optional text here 
<button style="cursor:pointer" id="btn">Click me</button>
<input type="file" id="inputField" style="display:none">

- Gass

13

不可能实现。否则您可能需要使用Silverlight或Flash上传控件。

- Anuraj

1

哪个是不可能的？更改文本还是将按钮放在右侧或两者都不可能？ - Harry Joy

22

我点赞了这个回答，因为我认为对它进行负票是不公平的。基本上无法更改本地文件输入按钮的文本。所有“可能的解决方案”都是一些欺骗或变通的方法。 - Peter Lee

16

@PeterLee - 黑客技术是解决方案，甚至有一些遵循W3C规范。 - Derek 朕會功夫

9

$(document).ready(function () {
 $('#choose-file').change(function () {
  var i = $(this).prev('label').clone();
  var file = $('#choose-file')[0].files[0].name;
  $(this).prev('label').text(file);
 }); 
 });

.custom-file-upload{
  background: #f7f7f7; 
  padding: 8px;
  border: 1px solid #e3e3e3; 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
can you try this

<label for="choose-file" class="custom-file-upload" id="choose-file-label">
   Upload Document
</label>
<input name="uploadDocument" type="file" id="choose-file" 
   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />

- Rokive

4

技巧在于在文件输入的单击事件上触发单击事件并通过 CSS 管理默认输入文件的可见性。以下是您可以执行此操作的方法：

jQuery：

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

css

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}

.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

HTML代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>

- Tushar Shukla

4

你可以采用这种方法，即使有很多文件输入也可以正常工作。

const fileBlocks = document.querySelectorAll('.file-block')
const buttons = document.querySelectorAll('.btn-select-file')

;[...buttons].forEach(function (btn) {
  btn.onclick = function () {
    btn.parentElement.querySelector('input[type="file"]').click()
  }
})

;[...fileBlocks].forEach(function (block) {
  block.querySelector('input[type="file"]').onchange = function () {
    const filename = this.files[0].name

    block.querySelector('.btn-select-file').textContent = 'File selected: ' + filename
  }
})

.btn-select-file {
  border-radius: 20px;
}

input[type="file"] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-block">
  <button class="btn-select-file">Select Image 1</button>
  <input type="file">
</div>
<br>
<div class="file-block">
  <button class="btn-select-file">Select Image 2</button>
  <input type="file">
</div>

- Илья Зеленько

我喜欢这种方法，但是对我来说，“Selected File”文本没有显示出来，你有什么想法吗？我使用的是Google Chrome。 - N Khan

3

我写了一个脚本并将其发布在GitHub上：获取 selectFile.js。易于使用，欢迎克隆。

HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>

JS

var getFile = new selectFile;
getFile.targets('choose','selected');

DEMO

jsfiddle.net/Thielicious/4oxmsy49/

- Thielicious

这很好，但是当我们需要多个输入时，你的代码无法工作。 - mehmet

@mehmet，原帖并没有要求使用多个文件输入的解决方案。 - Thielicious

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

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

- algometrix · Accepted Answer

使用label元素的for属性来关联表单元素input。

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

以下是获取上传文件名的代码

$("#files").change(function() {
  filename = this.files[0].name;
  console.log(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label for="files" class="btn">Select Image</label>
    <input id="files" style="visibility:hidden;" type="file">
</div>