我试图在我的 HTML 中获取上传的图像文件的名称。我尝试在https://stackoverflow.com/questions/1804745/get-the-filename-of-a-fileupload-in-a-document-through-javascript和应用解决方案https://stackoverflow.com/questions/14359913/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)}当我运行这段代码时，它向我显示了一个包含数千个字母和数字的疯狂长文本。这肯定不是我要求的。控制台输出看起来像这样，但只有更长的时间：我正在使用src而不是value. 我猜这就是造成这种情况的原因。但我不知道我还能如何访问这些信息，我现在知道它value不用于 img 标签。我该怎么做才能只得到文件的名称？
2 回答
慕娘9325324
TA贡献1783条经验 获得超5个赞
这有效，只是在本地文件上进行了测试并给出了正确的名称。只需要熟悉 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>
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
尝试这样的事情：
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()"/>
创建一个临时项并附加图像以获取属性，我不知道这是否适用于您的情况。
添加回答
举报
0/150
提交
取消