我想改变按钮上的默认文本,即“选择文件”,当我们使用input=" File"。
我该怎么做呢?也可以看到,在图像按钮是在文本的左侧。我怎么把它放在文本的右边?
我想改变按钮上的默认文本,即“选择文件”,当我们使用input=" File"。
我该怎么做呢?也可以看到,在图像按钮是在文本的左侧。我怎么把它放在文本的右边?
当前回答
2017年更新:
我研究过如何实现这一目标。最好的解释/教程在这里: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
我将在这里写摘要,以防它变得不可用。所以你应该有HTML:
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>
然后用CSS隐藏输入:
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}
然后样式标签:
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}
然后你可以选择添加JS来显示文件的名称:
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener( 'change', function( e )
{
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else
fileName = e.target.value.split( '\\' ).pop();
if( fileName )
label.querySelector( 'span' ).innerHTML = fileName;
else
label.innerHTML = labelVal;
});
});
但是真的只要阅读教程和下载演示,它真的很好。
其他回答
这里是如何用bootstrap完成的,只是你应该把原始输入放在某个地方…idk 在头部,如果你有< br >,删除它,因为它只是隐藏和占用空间:)
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label> <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;"> <footer> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </footer>
您可以使用一个简单的按钮和隐藏输入文件
使用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);
});
这应该可以工作:
input.*className*::-webkit-file-upload-button {
*style content..*
}
<!DOCTYPE html > < html > < >头 < meta charset = " utf - 8 " > <meta name="viewport" content="width=device-width"> <标题> JS本< /名称> < / >头 身体< > <按钮样式= "显示:块;宽度:120 px;高度:30 px; " onclick = " . getelementbyid (getFile) .click ()你的文本在这里</按钮> <input type='file' id="getFile" style="display:none"> 身体< / > < / html >
从这个问题的答案,我修复了许多评论说,不工作,这是它没有显示多少文件用户选择。
<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>
你可以很容易地通过显示文件名来改进它,而不是你想做的任何事情,但我想要的是通知用户他们已经选择了文件。