英文:
How to make an Array of images getting by input field and display the Array image as slider
问题
我的问题是如何通过输入字段创建图像数组，并在JavaScript中将数组图像显示为滑块。任何人都可以解决这个问题，请回答我。
请提供JavaScript代码。
document.querySelector("#a").addEventListener("change", function(){
const reader = new FileReader();
reader.addEventListener("load", () => {
localStorage.setItem("recent-image", reader.result)
});
reader.readAsDataURL(this.files[0]);
});
document.addEventListener("DOMContentLoaded", () => {
const imageurl = localStorage.getItem("recent-image");
if(imageurl){
document.querySelector("#b").setAttribute("src", imageurl);
}
});
你能否使用数组来完成这个任务，请回答我。
它只能处理一个图像，但我想通过数组在本地存储中存储多个图像，请回答我。
英文:
My problem is to make array of image by input field and display array images as slider in JavaScript
anyone can solve it please answer me
Please give code of JavaScript
document.querySelector("#a").addEventListener("change", function(){
const reader = new FileReader();
reader.addEventListener("load", ()=>{
localStorage.setItem("recent-image", reader.result)
});
reader.readAsDataURL(this.files[0]);
});
document.addEventListener("DOMContentLoaded()", ()=> {
const imageurl = localStorage.getItem("recent-image");
if(imageurl){
document.querySelector("#b").setAttribute("src", imageurl);
}
});
can you do this in array please answer me
it take only one image image but, I want to store multiple image in local storage by array
please answer me
答案1
得分: 1
以下是翻译好的代码部分：
问题我看到的是要定义您的本地存储并确保图像存储在其中，以便稍后遍历每个图像，我提供了解决方法的示例
var images = localStorage.getItem('images') || [];
function saveImages() {
localStorage.setItem('images', JSON.stringify(images));
}
function drawImages() {
var slider = document.getElementById('slider');
slider.innerHTML = '';
for (var i = 0; i < images.length; i++) {
const img = images[i];
const html_img = document.createElement('img');
html_img.src = img;
html_img.alt = 'Alt img';
html_img.width = 200;
html_img.height = 150;
slider.appendChild(html_img);
}
}
document.querySelector("#a").addEventListener("change", function(){
const reader = new FileReader();
reader.addEventListener("load", ()=>{
images.push(reader.result);
drawImages();
});
reader.readAsDataURL(this.files[0]);
});
document.addEventListener("DOMContentLoaded", drawImages);
英文:
The problem that I see is to define your localstorage and make sure that the images are stored in it to later go through each one of them, I leave an example of how to solve it
var images = localStorage.getItem('images') || [];
function saveImages() {
localStorage.setItem('images', JSON.stringify(images));
}
function drawImages() {
var slider = document.getElementById('slider');
slider.innerHTML = '';
for (var i = 0; i < images.length; i++) {
const img = images[i];
const html_img = document.createElement('img');
html_img.src = img;
html_img.alt = 'Alt img';
html_img.width = 200;
html_img.height = 150;
slider.appendChild(html_img);
}
}
document.querySelector("#a").addEventListener("change", function(){
const reader = new FileReader();
reader.addEventListener("load", ()=>{
images.push(reader.result);
drawImages();
});
reader.readAsDataURL(this.files[0]);
});
document.addEventListener("DOMContentLoaded()", drawImages);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论