使用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>