How can I change the label name when file is selected?-CodePudding

HTML is given below-

<input type="file"  accept="image/*" onchange="loadFile(event)" id="customFile">
 <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

CodePudding user response：

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

CodePudding user response：

Var name = document.getElementById("customFile").value;

Use

document.getElementById("Change").innerHTML = name

Please correct the spelling.