我正在尝试在HTML上获取上传的图像文件的名称。我试图将解决方案应用于Get the filename of a fileupload in a document through JavaScript和How to get Value of img tag?。他们帮助了我一点，但没有完全解决。因此，我的img标签看起来像这样：
<img id="imgPreview" src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="imgListener()"/>
上面的函数看起来像这样：
function imgListener(imgFile){
console.log(document.getElementById('imgPreview').src)
}
当我运行此代码时，它显示了一个疯狂的长文本，其中包含成千上万的字母和数字。那肯定不是我要的。所以控制台输出看起来像这样，但是只有更长的时间：
data:image/jpeg;base64,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
我正在使用src，而不是value。我猜这就是原因。但是我不知道我还能如何访问此信息，我现在知道value未用于img标签。我该如何做，以便仅获得文件名？
此方法有效，只是在本地文件上进行了测试，并提供了正确的名称。只需熟悉img对象上的对象属性即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<img id="imgPreview" src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="imgListener()"/>
<script>
function imgListener(imgFile){
console.log(document.getElementById('imgPreview').attributes[1].textContent);
}
</script>
</html>
让我知道是否可行
替代
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<img id="imgPreview" src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="imgListener()"/>
<script>
function imgListener(imgFile){
let name = document.getElementById('imgPreview').attributes[1].textContent;
let nameSplit = name.split("/");
let lastSplit = nameSplit[nameSplit.length - 1];
console.log(lastSplit);
}
</script>
</html>
尝试这样的事情：
function imgListener(imgFile){
const el = document.getElementById('imgPreview');
const tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.getElementsByTagName("img")[0].getAttribute("src").split("/").reverse()[0])
}<img id="imgPreview" src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" style="padding-left:15px;" onload="imgListener()"/>创建一个临时项目并附加图像以获取属性，我不知道这是否适合您的情况。