javascript - 将按钮“选择文件”文本更改为文件名
问题描述
我正在尝试为文件选择器自定义“选择文件”按钮。为了表明选择了文件,我希望将“选择文件”文本更改为文件名。这是我尝试过的:
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;
});
});
但它不起作用,选择文件后没有任何改变。
解决方案
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 = filename
}
})
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>
推荐阅读
- azure - PowerBi Embedded 使用 .NET SDK 暂停和恢复容量
- python - Google Cloud Functions 支持哪些版本的 Python 包?
- reporting-services - 在没有域的本地网络中访问 SSRS
- javascript - 删除标签
- swift - 将 uiview 控制器显示为弹出窗口
- python - 分叉时从 rc.local 自动运行不起作用 (&)
- matlab - AppDesigner/Add-On-Explorer 在 Linux 下无法使用
- objective-c - 如何在 macOS 上确定两个应用程序在同一设备上(macOS 中 identifierForVendor 的替代方案)
- html - Chrome 不显示 XSLT
- c# - 打印 ESCPOS 图像 c#