Fatal编程技术网
  • javascript/
  • Javascript 如何在我的HTML中获取图像文件的名称

Javascript 如何在我的HTML中获取图像文件的名称

javascript html image

Javascript 如何在我的HTML中获取图像文件的名称,javascript,html,image,onload,Javascript,Html,Image,Onload,我正在尝试在我的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标签看起来就像这样： &

我正在尝试在我的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)
}
当我运行这段代码时，它会显示一个包含数千个字母和数字的疯狂长文本。那肯定不是我想要的。 控制台输出看起来像这样，但只长了很多：

data:image/jpeg;base64,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
我使用的是
src
而不是
value
。我猜这就是原因。但我不知道如何访问这些信息，我现在知道，
value
不用于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)
}

函数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对象上的对象属性即可

<!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>


函数imgListener（imgFile）{
log（document.getElementById（'imgPreview'）.attributes[1].textContent）；
}
让我知道这是否有效

另类

<!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>


函数imgListener（imgFile）{
让name=document.getElementById（'imgPreview'）。属性[1]。文本内容；
让nameSplit=name.split（“/”）；
设lastSplit=nameSplit[nameSplit.length-1]；
console.log（lastplit）；
}
use
var img=document.getElementById（'imgPreview'）；log（img.src）
获取图像src，这是图像源；它是一个数据URL，将整个图像编码为一个字符串，可以用来代替任何URL。无论脚本如何设置图像的源，它都使用一个数据URL。（试试看：将你得到的整个数据URL复制到浏览器的地址栏中，然后按enter键。你会看到图片。）你的建议和我上面所做的不一样吗？不管怎样，我试过了。同样的结果。正如@IceMetalPunk所说，有一些库/框架/CMS正在转换base64中的图像，以节省磁盘空间。你的问题没有一个简单的答案，你是在创建这些图像标签吗？您可以将src放在alt属性中，然后获取document.getElementById（'imgPreview'）。alt.Hey，这会给出与我的代码中相同的结果，返回图像源，而不是图像文件的名称。我测试它时使用了jpg而不是png，hmmm，根据格式可能有不同的对象参数列表。让我试试本地png…也可以用png。使用firefox dev editon。可能与你的形象有关。尝试使用另一个png图像进行测试。这是我用过的确切数字<代码>https://clipground.com/images/png-tree-clipart-3.png好的，上面的代码至少有助于显示我的src产权。但每当我加载另一个文件时，它都会显示图像源，而不是文件名。我试过使用几个不同的jpg和png文件…第二个选项返回该图像源中的一些字符。但这看起来不像文件名。同样，它只适用于图像源。顺便说一句，非常感谢你的帮助。我真的很感激