将按钮“选择文件”文本更改为文件名答案

【问题标题】：Change button "Choose file" text to file name将按钮“选择文件”文本更改为文件名
【发布时间】：2019-02-22 07:12:39
【问题描述】：

我正在尝试为文件选择器自定义“选择文件”按钮。为了表明选择了文件，我希望将“选择文件”文本更改为文件名。这是我尝试过的：

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;
    });
});

但它不起作用，选择文件后没有任何更改。

【问题讨论】：

你不需要这样做，它是默认完成的。
出于安全原因，文件输入元素没有太多可更改的功能。您将需要模仿外观并使用事件将事件传输到真实（隐藏）文件输入。

标签： javascript image file file-upload image-uploading

【解决方案1】：

<!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()">File Name</button>
  <input type='file' id="getFile" style="display:none">
</body>

</html>

【讨论】：

注意：您想要传输更多事件，然后只是 onclick。有时人们确实使用键盘而不是鼠标。如果你不使用按钮，你可能不得不考虑让事情变得有焦点。

【解决方案2】：

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>

【讨论】：

我尝试了你的代码，但是在 javascript 代码中，Netbeans 给了我一些错误：
“预期 aperand 但找到”在前 2 行中为“const”下一个用于此“[...buttons]”和“预期 eof 但找到”用于“})”。我尝试修复它，但没有任何效果。