0

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

Raj
  • 37
  • 8

2 Answers2

1

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

stormworm29
  • 61
  • 2
0
Var name = document.getElementById("customFile").value;

Use

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

Please correct the spelling.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339