无后端的Javascript上传图像预览
我正在尝试预览照片。每当我单击“浏览输入”并选择“图像”时,图像将以HTML显示,但当我再次单击“浏览”并选择另一张图片时,第一张图片将被删除并替换为新的output.innerHTML。有没有办法保存旧的并把它们堆放起来?我对JS非常陌生,尝试寻找解决方案已经有一段时间了,但每个人都建议使用PHP并上传到DB,我可以这样做,但我被要求只使用vanillaJS无后端的Javascript上传图像预览,javascript,image,preview,createobject,Javascript,Image,Preview,Createobject,我正在尝试预览照片。每当我单击“浏览输入”并选择“图像”时,图像将以HTML显示,但当我再次单击“浏览”并选择另一张图片时,第一张图片将被删除并替换为新的output.innerHTML。有没有办法保存旧的并把它们堆放起来?我对JS非常陌生,尝试寻找解决方案已经有一段时间了,但每个人都建议使用PHP并上传到DB,我可以这样做,但我被要求只使用vanillaJS <form id="form" method="post" onchange="loadFile(event)">
<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>
文件名:
说明:
上传照片:
让loadFile=函数(事件){
让输出=document.getElementById(“gallery”)
让src=URL.createObjectURL(event.target.files[0]);
output.innerHTML=“”
};
您可以按如下方式执行:
<form id="form" method="post">
<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="button" name="submit" id="submit" value="Upload" onclick="loadFile(event);">
</div>
</form>
<div id="gallery"></div>
<script>
let loadFile = function(event){
let output = document.getElementById("gallery");
let file = document.getElementById("file");
let src = URL.createObjectURL(file.files[0]);
//output.innerHTML = "<div><img src='"+src+"'></div>";
var e = document.createElement('div');
e.innerHTML = "<img src='"+src+"'></div>";
while(e.firstChild) {
output.appendChild(e.firstChild);
}
};
</script>
文件名:
说明:
上传照片:
让loadFile=函数(事件){
让输出=document.getElementById(“gallery”);
让file=document.getElementById(“文件”);
设src=URL.createObjectURL(file.files[0]);
//output.innerHTML=“”;
var e=document.createElement('div');
e、 innerHTML=“”;
while(如第一个孩子){
输出.appendChild(如firstChild);
}
};
添加css样式以进行美化,并根据需要调整大小。这个问题的答案已经在这里了:是的,它可以工作,但只能用于一个图像。您必须附加图像,而不仅仅是替换它。查看参考资料:非常感谢,我在您的帮助下修复了它,不知道是否有可能只有当我单击“上载输入”时才会添加图像?我添加了只有当您点击“上载”按钮时才会显示图像的答案。这很好,如果您对答案感到满意,请接受它。谢谢,谢谢,我做到了。快速提问,也许你会知道,当我点击后退按钮时,是否可以将图像保存在HTML中?当你点击后退按钮时,你会看到以前打开过的页面,比如历史回顾,答案是否定的,除非你做一些额外的步骤。。谢谢你接受了答案。