Change default text in input type=“file”?

2019-01-03 13:19发布

站内问答 / 后端开发
1008 14 6

I want to change default text on button that is "Choose File" when we use input="file".

enter image description here

How can I do this? Also as you can see in image button is on left side of text. How can I put it on right side of text?

14条回答
Viruses.
2楼-- · 2019-01-03 13:37

This might help someone in the future, you can style the label for the input as you like and put anything you want inside it and hide the input with display none.

It works perfectly on cordova with iOS

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

查看更多
0人赞 添加讨论(0) 举报
走好不送
3楼-- · 2019-01-03 13:38

I think this is what you want:

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

查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
4楼-- · 2019-01-03 13:38

Here how you can do it:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="margin-top:4px;">
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>
查看更多
0人赞 添加讨论(0) 举报
▲ chillily
5楼-- · 2019-01-03 13:38

Let me add a hack I used. I wanted to have a section that allowed you to drag and drop files, and I wanted that drag and drop section to be clickable along with the original upload button.

Here is how it looked like when I was done (minus the drag and drop ability, there are plenty of tutorials on how to do that).

And then I actually created a series of blog posts that are mainly about file upload buttons.

查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
6楼-- · 2019-01-03 13:46

It is not possible. Otherwise you may need to use Silverlight or Flash upload control.

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
7楼-- · 2019-01-03 13:46

You can use this approach, it works even if a lot of files inputs.

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>

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)