自定义文件上传按钮以使用JavaScript显示文件名

Question

我是JavaScript的新手，我无法更改自定义的“文件上传”按钮的标签以在选择文件后显示文件名。

试图遵循these steps。

按钮显示正确，文件已上传，但我无法使JS正常工作以在按钮上显示上传文件的名称。

var inputs = document.querySelectorAll('.wpcf7-file');

Array.prototype.forEach.call(inputs, function(input) {
  input.addEventListener('change', function(e) {
    var label = document.querySelectorAll('.custom-file-button');
    var fileName = '';
    fileName = e.target.value.split('\\').pop();
    if (fileName) {
      label.innerHTML = fileName;
    } else
      label.innerHTML = labelVal;

  });
});

label.custom-file-button {
  position: relative;
}

label.custom-file-button:before {
  content: " Take or upload picture";
  position: absolute;
  left: 0;
  padding: 10px;
  background: #1b87d5;
  color: #fff;
  width: auto;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}

label.custom-file-button:hover:before {
  background: #146bac;
}

.custom-file-input {
  visibility: hidden;
}

<div class="limit-to-view">
  <label class="wpcf7-form-control-wrap custom-file-button">
      <span class="wpcf7-form-control-wrap custom-file-input">
        <input type="file" name="custom-file-input" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-invalid="false">
      </span>
    </label>
</div>

Answer 1

.querySelectorAll()返回NodeList，而不是单个元素。将.closest()替换为.querySelectorAll()，以选择最接近当前<label>元素的祖先<input type="file">元素。由于<input type="file">元素是<label>设置文件名的.innerHTML的子元素，因此将覆盖<input type="file">元素。 CSS不会显示<span>的第一个子元素<label>，而是添加<span>以将文件名显示为.nextElementSibling元素的<label>。您可以使用e.target.files[0].name来获取文件名。

var inputs = document.querySelectorAll('.wpcf7-file');

Array.prototype.forEach.call(inputs, function(input) {
  input.addEventListener('change', function(e) {
    var label = e.target.closest('.custom-file-button');
    label.nextElementSibling.innerHTML = e.target.files[0].name;
  });
});

label.custom-file-button {
  position: relative;
}

label.custom-file-button:before {
  content: " Take or upload picture";
  position: absolute;
  left: 0;
  padding: 10px;
  background: #1b87d5;
  color: #fff;
  width: auto;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}

label.custom-file-button:hover:before {
  background: #146bac;
}

.custom-file-input {
  visibility: hidden;
}

<div class="limit-to-view">
  <label class="wpcf7-form-control-wrap custom-file-button">
      <span class="wpcf7-form-control-wrap custom-file-input">
        <input type="file" name="custom-file-input" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-invalid="false">
      </span>
    </label>
    <span></span>
</div>