使用 Javascript 选择文件后如何更改 HTML 标签文本

Question

感谢您查看我的问题。我有一个下面的表格，它有一个文件输入字段。可以肯定地说我已经隐藏了这个输入字段，现在我使用标签作为主要的“按钮”来选择文件。一旦用户单击“上传图片...”标签，我希望标签内的文本从“上传图片...”更改为文件名。我正在关注下面的本教程，但是编写的 javascript（在本教程中）适用于用户可以选择的多个文件。我只允许我的用户选择一个文件。这是一个更改您的个人资料图片页面，以便了解此表单的作用。

代码如下：

<!-- Change Picture Form -->
            <div class="changepic-wrap">
              <form action="changepicauth.php" method="post">
                <input type="file" name="profilepic" id="profilepic" class="inputfile">
                <br>
                <label for="profilepic">
                  <img src="/images/profile/upload.png" />
                  Upload Picture...
                </label>
                <br>
                <div class="button-wrap">
                  <button>Change Picture</button>
                </div>
              </form>
            </div>

教程如下：

http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

有人可以帮我解释一下我必须做什么吗？我在想一些类似于事件监听器的东西，但我不确定 javascript。我是一名后端开发人员，对 javascript 知之甚少。我不想使用 JQUERY。仅限纯 JavaScript。

再次感谢 StackOverflow 成员的帮助！ :D

编辑： 有人说文本已经在改变。这不是...我希望 LABEL 文本改变。 “文件输入”标签有两个部分。按钮，以及按钮旁边的文本。我使用以下 SASS 代码隐藏了输入标签。这样只显示“上传图片...”标签文本。请确保将此 SASS 代码添加到您的文件中，以便您可以看到 LABEL 文本没有更改。

.inputfile
        width: 0.1px
        height: 0.1px
        opacity: 0
        overflow: hidden
        position: absolute
        z-index: -1

Answer 1

您可以使用javascript onchange 事件来检测#profilepic input 的值何时发生变化。

当它发生时，您可以捕获#profilepic input 的新value 并将标签的文本替换为value。

示例：

var profilePic = document.getElementById('profilepic'); /* finds the input */

function changeLabelText() {
    var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */
    var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */
    profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */
    var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */
    if (profilePicValue !== '') {
        profilePicLabelText.textContent = profilePicValue; /* changes the label text */
    }
}

profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */

<div class="changepic-wrap">
<form action="changepicauth.php" method="post">
<input type="file" name="profilepic" id="profilepic" class="inputfile">
<br>
<label for="profilepic">
<img src="/images/profile/upload.png" />
Upload Picture...
</label>
<br>
<div class="button-wrap">
<button>Change Picture</button>
</div>
</form>
</div>

Answer 2

可以使用change事件，选择for属性值等于event.target的元素：#profilepic元素id，设置被选元素的.innerHTML为event.target.files[0].name

document.getElementById("profilepic")
.addEventListener("change", function(e) {
  document.querySelector("[for=" + e.target.id + "]")
  .innerHTML = e.target.files[0].name;
})

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

<!-- Change Picture Form -->
<div class="changepic-wrap">
  <form action="changepicauth.php" method="post">
    <input type="file" name="profilepic" id="profilepic" class="inputfile">
    <br>
    <label for="profilepic">
      <img src="/images/profile/upload.png" />Upload Picture...
    </label>
    <br>
    <div class="button-wrap">
      <button>Change Picture</button>
    </div>
  </form>
</div>