如何在html中的“上传”按钮旁边打印输入文件的名称

Question

我正在尝试在“上传”按钮旁边打印文件名，但是由于某种原因，它不起作用。目前，上传按钮有效，但我想在其旁边打印文件名。

这是我的html外观

这是上载标签类之一的css部分

.upload-label{
    display: inline-block;
    padding: 12px 30px;
    background: #39D2B4;
    color: #fff;
    font-size: 1em;
    transition: all .4s;
    cursor: pointer;
}

.upload-label:hover{
    background: #34495E;
    color: #39D2B4;
}

HTML

<form id="upload-file" method="post" enctype="multipart/form-data">
    <label for="imageUpload" class="upload-label">
        Choose...
    </label>
    <input type="file" name="file" id="imageUpload" accept=".png, .jpg, .jpeg">
</form>

Answer 1

您可以通过访问value元素的<input>或通过监听上传事件（change）来获取文件名。

请注意，无论如何，您都必须在上传后后获得文件名，因此使用监听器可能是一个更好的主意。

const inputElement = document.getElementById('imageUpload');

inputElement.addEventListener('change', function(e) {
  console.log(e.target.value);      // First print
  console.log(inputElement.value);  // Second print
});

<form id="upload-file" method="post" enctype="multipart/form-data">
    <label for="imageUpload" class="upload-label">
        Choose...
    </label>
    <input type="file" name="file" id="imageUpload" accept=".png, .jpg, .jpeg">
</form>

然后，您可以使用多种方法将fileName注入到元素（即ID为output）中，例如：

document.getElementById('output').innerText = fileName