Как получить имя файла изображения в моем HTML - PullRequest
Новая
       31

Как получить имя файла изображения в моем HTML

0 голосов
/ 31 октября 2019

Я пытаюсь получить имя загруженного файла изображения в моем HTML. Я пытался применить решения на /879731/poluchit-imya-faila-dlya-zagruzki-faila-v-dokumente-s-pomoschy-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. Как я могу это сделать, чтобы я получил только имя файла?

Ответы [ 2 ]

0 голосов
/ 31 октября 2019

это работает, только что протестировано на локальном файле и дает правильное имя. просто нужно ознакомиться со свойствами объекта на объекте 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>
0 голосов
/ 31 октября 2019

Попробуйте что-то вроде этого: 

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()"/>

Создайте временный элемент и добавьте изображение, чтобы получить атрибут, я не знаю, работает ли это в вашем случае.

...