选择文件后如何更改标签名称？

Question

下面给出

HTML-

<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="#"/>

脚本如下-

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
}
};

我的代码能够显示所选图像，但我还想将标签文本更改为所选图像名称

Answer 1

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

使用

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

请更正拼写。

Answer 2

更改标签文本的逻辑可以写在更改事件上。检查以下事件片段，

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;
}

有关获取文件名的更多输入，请检查

选择文件后如何更改标签名称？

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

html

javascript

jquery

file-upload

image