如何设计自定义文件上传按钮，以便在上传文件时更改标签

Question

<form method="post" enctype="multipart/form-data" action="">
  <span id="filename">Select your file</span>
    <label for="file-upload">Browse<input type="file" id="file-upload"></label>
</form>
<script>
$('#file-upload').change(function() 
    var filepath = this.value;
    var m = filepath.match(/([^\/\\]+)$/);
    var filename = m[1];
    $('#filename').text(filename);
});
</script>

我只是想帮助实现提交按钮，这样每个人都不会使用我们在这里使用的单独的文件名 ID。我是 js 新手，我的项目中有很多文件上传按钮，当我使用类时，每个文件名的更改都只反映在一个按钮上。

Answer 1

使用 vanilla Javascript 非常快速地拼凑在一起〜基本上如果有多个文件输入元素并且您希望每个元素具有相同的功能，那么您将希望获得对节点列表集合的引用（querySelectorAll 将返回一个节点列表）并且，为每一个分配一个change 事件处理程序。 使用parentNode 和previousElementSibling 的组合，您可以识别span 元素并轻松修改它。

文件的实际上传可以由 change 处理程序处理，并因此对 DOM 进行修改。

    document.querySelectorAll('input[type="file"]').forEach( input=>{
        input.addEventListener('change',function(e){
            this.parentNode.previousElementSibling.textContent=this.value.match(/([^\/\\]+)$/)[1];
            this.parentNode.textContent='Uploading...';
        });
    });

<form method='post' enctype='multipart/form-data'>
    <span>Select your file</span>
    <label for='file-upload'>Browse<input type='file' /></label>
</form>

<form method='post' enctype='multipart/form-data'>
    <span>Select your file</span>
    <label for='file-upload'>Browse<input type='file' /></label>
</form>