如何使用Javascript在表单中选择文件时更改标签文本

感谢您查看我的问题。如何使用Javascript在表单中选择文件时更改标签文本

我问类似这样的前手在下面的链接的问题。不幸的是，给出的答案适用于代码片段，但不适用于我的网站。我创建了一个空白的HTML文档，并在其中插入了以下代码。我想要做的基础是这个。文件输入标签将使用CSS隐藏。然后我使用标签来接管输入标签的控制。一旦选择了一个文件，我希望文件名（不是路径）显示在标签内，并且也保持图像对用户可见。正如我在上一个问题中所述，我不希望使用jQuery。预先感谢您看看我的代码并提供帮助！

继承人我刚才的问题：How do I change HTML Label Text Once File Has Been Selected using Javascript

继承人的代码我的“index2.php”文件：

<html> 
    <head> 
    <script> 
     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 */ 
    </script> 
    </head> 
<body> 
    <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="#" /> 
     Upload Picture... 
     </label> 
     <br> 
     <div class="button-wrap"> 
     <button>Change Picture</button> 
     </div> 
    </form> 
    </div> 

</body> 
</html>

来源

2016-08-08 J. Robinson

包装你 “上传图片” 用' ...'并改变其'innerHTML'。 –

我不想使用标签。感谢您的建议，但那不是我想要做的。 –

放置<script>...</script>在文档的最后，只是</body>之前。

这样，所有DOM将已经加载，您将不需要监听onload或onDOMContentLoaded事件。

来源

2016-08-08 20:47:55 Rounin

你走了！我知道@Rounin会来解决问题！谢谢哥们！ –

回首以前的问题，它的答案。我看到没有检查，看到DOM已加载。如果您在答案中复制并粘贴了该代码，则无法在您的网站上正常工作。

尝试使用这些中的一个：

document.addEventListener('DOMContentLoaded', function() { myFunction(); });

或

window.onload = myFunction();

或

<body onload="myFunction()"> <!-- in the html -->

我推荐的第一选择。您需要将为您编写的代码封装在函数内（如myFunction（）;），然后使用其中一种方法调用它。否则，代码正在尝试对尚未加载的DOM执行操作。

精心设计：您需要将您的代码放入onload函数中 - 这与您的名称无关。

<script> 
    function myFunction(){ 
      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 */ 
    } 

window.onload = myFunction(); 
</script>

来源

2016-08-08 19:46:34 user3044394

我尝试了所有这些不同的方式，除了他们没有工作。你能否使用我的changeLabelText（）措辞让你的答案更具体地针对我的问题，而不是使用函数（）等通用的措辞。谢谢。 –

即使在编辑之后，仍然无法正常工作。我的新代码可以在这个pastebin中找到。 http://pastebin.com/iibrgqkS –

你必须把所有的代码在onload。你不想调用这个函数。试试我刚发布的 – user3044394

我与其他人的帮助下在两个问题终于已经得出的结论。这是可以在任何浏览器上工作的FINAL代码。感谢你的帮助！

<html> 
    <body> 
    <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="#" /> 
      Upload Picture... 
     </label> 
     <br> 
     <div class="button-wrap"> 
      <button>Change Picture</button> 
     </div> 
     </form> 
    </div> 

    <script> 
     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 */ 
    </script> 
    </body> 
</html>

来源

2016-08-08 20:59:28

如何使用Javascript在表单中选择文件时更改标签文本

回答

相关问题