随机图像打印javascript

当人们把他们的图片上传到输入框时，我想给他们显示随机图片

但当我上传图片时，它并没有改变，只是在我点击重置按钮时改变了。（我不知道为什么会变成那样）

请帮帮我

这是我的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>

函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'.image upload wrap'）.hide（）；
$（'.file upload image'）.attr（'src'，e.target.result）；
$（'.file upload content'）.show（）；
$（'.image title'）.html（输入.files[0].name）；
};
reader.readAsDataURL（input.files[0]）；
randomImg（）
}否则{
removeUpload（）；
}
}
函数removeUpload（）{
$（'.file upload input'）.replace为（$（'.file upload input'）.clone（））；
$（'.file upload content'）.hide（）；
$（'.image upload wrap'）.show（）；
}
$（'.image upload wrap'）.bind（'dragover'，函数（）{
$（'.image upload wrap'）.addClass（'image-droping'）；
});
$（'.image upload wrap'）.bind（'dragleave'，function（）{
$（'.image upload wrap'）.removeClass（'image-droping'）；
});
函数randomImg（）{
变量引号=[
{
正文：“1”，
img:'img/1.jpg'，
},
{
正文：“2”，
img:'img/2.jpg'，
},
{
正文：“3”，
img:'img/3.jpg'，
},
{
正文：“4”，
img:'img/4.JPG'，
},
];
var quote=quotes[Math.floor（Math.random（）*quotes.length）]；
document.getElementById（“quote”）.innerHTML=
“”+quote.text+”
“+”；
}

对不起，时间太长了，我自己解决不了。 我真的很感谢你的帮助

编辑：

<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（）{
变量引号=[
{
正文：“1”，
img:'img/1.jpg'，
},
{
正文：“2”，
img:'img/2.jpg'，
},
{
正文：“3”，
img:'img/3.jpg'，
},
{
正文：“4”，
img:'img/4.JPG'，
},
];
var quote=quotes[Math.floor（Math.random（）*quotes.length）]；
变量quoteEl=
文件.getElementById（“报价”）；
quoteEl.innerHTML=
“”+quote.text+”
”；
var quoteImg=新图像（）；
quoteImg.onload=函数（）{
quoteEl.appendChild（quoteImg）；
};
quoteImg.src=quote.img；
}

---

为随机函数尝试此选项仅代码答案不如解释您所做的更改/改进。你应该更新更多细节。好的，让我解释一下。。。我刚刚为img创建了一个阴影dom节点。。只是给那个节点分配了一个src。。。加载图像后，我将该节点附加到该quote元素…您应该更新答案（查找编辑按钮）@kavin我复制了您的答案，但它是这样说的。ncaught ReferenceError:img未在image.quoteImg.onload（index.html:174）中定义