更改输入类型="文件"中的默认文本？
Har*_*Joy 154 html file input default-value
我想在使用时更改" Choose File" 按钮上的默认文本input="file".
我怎样才能做到这一点？另外,您可以在图像中看到按钮位于文本的左侧.我怎么能把它放在文本的右侧？
alg*_*rix 144
使用for "for"属性.labelinput
<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>- `display:none`可用于INPUT,因此不会使用不需要的空间. (13认同)
- 效果很好,只有轻微的否定是用户无法看到选择时选择的文件的名称. (5认同)
- 谢谢你。这工作得很好，正是我正在寻找的。 (2认同)
- 在装有 Chrome、FF 和 Safari 的 Mac 上运行良好。如果在 IE 上也能做到这一点，那么这是设置文件输入按钮样式的最佳且最简单的选项。谢谢！ (2认同)
- @Mike 更新了帖子以获取文件名 (2认同)
Shi*_*mar 44
每个浏览器都有自己的控件再现,因此您无法更改控件的文本或方向.
如果你想要一个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
就个人而言,因为大多数用户坚持使用他们选择的浏览器,因此可能习惯于在默认的再现中看到控件,如果他们看到不同的东西(取决于你正在处理的用户类型),他们可能会感到困惑. .
Pau*_*lón 24
这可能会对将来的某个人有所帮助,您可以根据需要为输入设置标签样式,并在其中放置您想要的任何内容,并使用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">Gas*_*ass 22
为了实现这一点，必须使用 CSS 属性隐藏默认的输入按钮display:none，并添加一个新的按钮元素来替换它，这样我们就可以根据需要进行自定义。
带引导程序
<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">1Cr*_*Ni9 20
我想这就是你想要的:
<!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>- 到目前为止最好的解决方案。 (3认同)
小智 12
<button class="styleClass" onclick="document.getElementById('getFile').click()">Your text here</button>
<input type='file' id="getFile" style="display:none">
这仍然是迄今为止最好的
这不可能.否则,您可能需要使用Silverlight或Flash上传控件.
- 我赞成这一点,因为我觉得这个答案是不公平的.基本上不可能更改本机文件输入按钮的文本."可能的解决方案"都是黑客或解决方法. (12认同)
- @PeterLee - Hacks*是*解决方案,有些甚至遵循W3C规范. (9认同)
小智 7
$(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;" />| 归档时间： |
|
| 查看次数： |
301927 次 |
| 最近记录： |