How to change text inside <label> with the file name of <input type="file" />
Question
I am trying to change the text inside the <label> tags with the chosen file's name from <input type="file" />
I have tried this, but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
</html>
As you can see I have 2 script sources. The first one is local, and it worked with all my little scripts. I have added the second one because I have found it in the example I got inspired from.
What do you think? jQuery is welcomed.
Resolve:
It did not work because the script has to be after the element in question. Moving the script at the end of the HTML page solved everything.
1 answers
solution1
1 ACCPTED 2019-07-09 14:33:48
The reason is because html loads top to bottom and your code runs the scripts before any elements are loaded on the page.
One solution:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</html>
Reference this post for more solutions: stackoverflow.com
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.