จาวาสคริปต์พิมพ์ภาพแบบสุ่ม

Question

เมื่อมีคนอัปโหลดรูปภาพลงในช่องป้อนข้อมูลฉันต้องการแสดงภาพแบบสุ่มให้พวกเขาดู

แต่เมื่อฉันอัปโหลดรูปภาพมันจะไม่เปลี่ยนแปลง แต่จะเปลี่ยนเมื่อฉันคลิกปุ่มรีเซ็ตเท่านั้น (ฉันไม่รู้ว่าทำไมมันถึงกลายเป็นแบบนั้น)

ช่วยฉันด้วย.

นี่คือ HTML ของฉัน

<div class="container file-upload">
<div class="image-upload-wrap" id="quote">
<input
class="file-upload-input"
type="file"
onchange="readURL(this);"
accept="image/*"
/>
<div class="drag-text">
<img src="Img/up-load.svg" class="mt-5 pt-5" width="80" alt="upload-image" />
<h3 class="mb-5 pb-5 pt-3 upload-text">UPLOAD YOUR PICTURE HERE!</h3>
</div>
</div>

<div class="file-upload-content">
<img class="file-upload-image" src="#" alt="your image" />
<div class="image-title-wrap">
<button type="button" onclick="removeUpload()" class="try-again-btn">
<span class="reset">RESET!</span>
</button>
</div>
</div>
</div>

นี่คือ js ของฉัน

<script>
function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('.image-upload-wrap').hide(); $('.file-upload-image').attr('src', e.target.result);
                    $('.file-upload-content').show(); $('.image-title').html(input.files[0].name);
                };
                reader.readAsDataURL(input.files[0]);
                
                randomImg()
                
            
            } else {
                removeUpload();
            }
        }

        function removeUpload() {
            $('.file-upload-input').replaceWith($('.file-upload-input').clone());
            $('.file-upload-content').hide(); $('.image-upload-wrap').show();
        }
        $('.image-upload-wrap').bind('dragover', function () { $('.image-upload-wrap').addClass('image-dropping');
        });
        $('.image-upload-wrap').bind('dragleave', function () { $('.image-upload-wrap').removeClass('image-dropping');
        });
    </script>

    <script>
        function randomImg() {
            var quotes = [
                {
                    text: '1',
                    img: 'Img/1.jpg',
                },

                {
                    text: '2',
                    img: 'Img/2.jpg',
                },

                {
                    text: '3',
                    img: 'Img/3.jpg',
                },

                {
                    text: '4',
                    img: 'Img/4.JPG',
                },
            ];
            var quote = quotes[Math.floor(Math.random() * quotes.length)];
            document.getElementById("quote").innerHTML =
                '<p>' + quote.text + '</p>' + '<img src="' + quote.img + '">';
        }
    </script>

ขอโทษที่ยาวเกินไป แต่แก้ไม่ได้ด้วยตัวเอง ขอขอบคุณสำหรับความช่วยเหลือของคุณ!

Answer 1

แก้ไข:

<script>
    function randomImg() {
        var quotes = [
        {
         text: '1',
        img: 'Img/1.jpg',
     },

    {
        text: '2',
        img: 'Img/2.jpg',
    },

    {
        text: '3',
        img: 'Img/3.jpg',
    },

    {
        text: '4',
        img: 'Img/4.JPG',
    },
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];

 var quoteEl   = 
document.getElementById("quote");
quoteEl.innerHTML =
    '<p>' + quote.text + '</p>' ;
 var quoteImg = new Image();
quoteImg.onload = function(){
quoteEl.appendChild(quoteImg);
};
quoteImg.src = quote.img;
}

ลองใช้ฟังก์ชัน randomImg