HTML is given below-
<input type="file" class="custom-file-input" accept="image/*" onchange="loadFile(event)" id="customFile">
<label class="custom-file-label" id="change" for="customFile">Choose File</label><br><br>
<img width="150px" id="output" src="#"/>
Script is given below-
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src) // free memory
}
};
My code is able to show the image selected but I also Want to Change The Label text to selected image name
The logic to change the label text can be written on the change event. Check the following event snippet,
document.getElementById('customFile').onchange = function() {
// code to change the label text
var fullName = getFileName(document.getElementById('customFile').value);
document.getElementById("change").innerHTML= fullName;
};
var getFileName = function(fullPath) {
if (!fullPath) return null;
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
return filename.substring(1);
}
return null;
}
For more input on getting the file name check https://stackoverflow.com/a/857662/17542117
Var name = document.getElementById("customFile").value;
Use
document.getElementById("Change").innerHTML = name
Please correct the spelling.