如何在使用Javascript在表单内选择文件时更改标签文本 [英] How to Change Label Text upon File being Selected within Form using Javascript
问题描述
感谢您看看我的问题。
我在下面的链接中问了一个类似于这个问题的问题。不幸的是，给出的答案适用于代码片段，但不适用于我的网站。我创建了一个空白的HTML文档，并在其中插入了以下代码。我想要做的基础是这个。文件输入标签将使用CSS隐藏。然后我使用标签来接管输入标签的控制。一旦选择了一个文件，我希望文件名（不是路径）显示在标签内，并且也保持图像对用户可见。正如我在上一个问题中所述，我不希望使用jQuery。在此先感谢您查看我的代码并提供帮助！
继承人我之前的问题：如何更改HTML标签文本一旦文件被选中使用Javascript
继承我的'index2.php'文件中的代码：
<< ; HTML>
< head>
< script>
var profilePic = document.getElementById（'profilepic'）; / *找到输入* /
函数changeLabelText（）{
var profilePicValue = profilePic.value; / *从输入中获取文件路径和文件名* /
var fileNameStart = profilePicValue.lastIndexOf（'\\\'）; / *找到文件路径的结尾* /
profilePicValue = profilePicValue.substr（fileNameStart + 1）; / *隔离文件名* /
var profilePicLabelText = document.querySelector（'label [for =profilepic]'）。childNodes [2]; / *找到标签文本* /
if（profilePicValue！==''）{
profilePicLabelText.textContent = profilePicValue; / *更改标签文本* /
}
}
profilePic.addEventListener（'change'，changeLabelText，false）; / *只要输入文件名改变，就运行函数* /
< / script>
< / head>
< body>
< div class =changepic-wrap>
< form action =changepicauth.phpmethod =post>
< input type =filename =profilepicid =profilepicclass =inputfile>
< br>
< label for =profilepic>
< img src =＃/>
上传图片...
< / label>
< br>
< div class =button-wrap>
<按钮>更改图片< /按钮>
< / div>
< / form>
< / div>
< / body>
< / html>
< script> ; ...< / script> 位于文档的最后，位于< / body> 之前。 这样，所有的 DOM 都已经加载完毕，你不需要监听 onload 或 onDOMContentLoaded 事件。
thank you for taking a look at my question.
I asked a question similar to this before hand at the link below. Unfortunately, the answer given works in the code snippet but not on my site. I created a blank HTML document and inserted the following code into it. The basics of what i'm trying to do is this. The file input tag will be hidden using CSS. I'm then using the label tag to take over control of the input tag. Once a file is selected i want the file name (not path) to be displayed within the label and also keep the image visible to the user as well. As previously stated in my last question I do NOT wish to use jQuery. Thanks in advance for taking a look at my code and helping out!
Heres my previous question: How do I change HTML Label Text Once File Has Been Selected using Javascript
Heres the code in my 'index2.php' file:
<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>
Place the <script>...</script> at the very end of the document, just before </body>.
That way, all of the DOM will already have loaded and you won't need to listen for an onload or an onDOMContentLoaded event.
这篇关于如何在使用Javascript在表单内选择文件时更改标签文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
