Pulsante-pagato· html
<!doctype html>
<htmllang=”it”>
<head>
<metacharset=”utf-8″ />
<metaname=”viewport”content=”width=device-width,initial-scale=1″ />
<title>Carica 10 Immagini</title>
<style>
body {margin:0; font-family:Arial, sans-serif; background:#f3f4f6; color:#111;}
h1 {text-align:center; padding:20px; margin:0;}
.uploader {text-align:center; margin:20px;}
input[type=file] {margin:10px0;}
.gallery {display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; padding:20px;}
.galleryimg {width:100%; height:auto; border-radius:8px; box-shadow:04px10pxrgba(0,0,0,0.1); object-fit:cover;}
</style>
</head>
<body>
<h1>Carica fino a 10 Immagini</h1>
<divclass=”uploader”>
<inputid=”fileInput”type=”file”accept=”image/*”multiple />
<p>Seleziona fino a 10 immagini dal tuo computer.</p>
</div>
<divclass=”gallery”id=”gallery”></div>
<script>
constinput = document.getElementById(‘fileInput’);
constgallery = document.getElementById(‘gallery’);
input.addEventListener(‘change’, () => {
gallery.innerHTML = ”;
constfiles = Array.from(input.files).slice(0,10); // max 10
files.forEach(file => {
constreader = newFileReader();
reader.onload = e => {
constimg = document.createElement(‘img’);
img.src = e.target.result;
img.alt = file.name;
gallery.appendChild(img);
};
reader.readAsDataURL(file);
});
});
</script>
</body>
</html>