我正在试着预览照片。每当我单击浏览输入并选择图像时,图像就会出现在超文本标记语言中,但是当我再次单击浏览并选择另一个图片时,第一张图片就会被删除并替换为新的output.innerHTML。有没有一种方法可以保留旧的并继续堆叠它们?我是JS的超级新手,一直在尝试寻找解决方案,但每个人都建议使用PHP并上传到DB,我可以做到这一点,但我被要求只使用vanillaJS。
<form id="form" method="post" onchange="loadFile(event)">
<label for="name">File name:</label>
<input type="text" id="name" placeholder="Test" value="">
<label for="description">Description:</label>
<textarea name="" id="description" cols="30" rows="5" placeholder="Alex" value=""></textarea>
<label for="file">Upload photo:</label>
<input type="text" id="browse" placeholder="No file selected" disabled>
<input type="button" value="Browse" id="loadFilesXml" onclick="document.getElementById('file').click();">
<input type="file" style="display:none;" id="file" name="file" accept="image/*">
<div class="flex">
<input type="submit" name="submit" id="submit" value="Upload">
</div>
</form>
<script>
let loadFile = function(event) {
let output = document.getElementById("gallery")
let src = URL.createObjectURL(event.target.files[0]);
output.innerHTML = "<div><img src='"+src+"'></div>"
};
</script>
https://stackoverflow.com/questions/51049523
复制相似问题