我如何改变HTML标签文本一旦文件已选择使用Javascript

How do I change HTML Label Text Once File Has Been Selected using Javascript

本文关键字：文件 选择 Javascript 文本 标签 何改变 改变 HTML      更新时间：2023-09-26

感谢观看我的问题。我有一个表单下面有一个文件输入字段。可以肯定地说，我已经隐藏了这个输入字段，现在使用标签作为选择文件的主要"按钮"。一旦用户点击"Upload Picture…"标签，我希望标签内的文本从"Upload Picture…"变为文件名。我在下面遵循这个教程，然而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

您可以使用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>

您可以使用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>

相关文章：