无后端Javascript上传图片预览
无后端Javascript上传图片预览
提问于 2018-06-27 02:41:00
我正在试着预览照片。每当我单击浏览输入并选择图像时，图像就会出现在超文本标记语言中，但是当我再次单击浏览并选择另一个图片时，第一张图片就会被删除并替换为新的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51049523
复制相关文章
相似问题