How to upload multiple image in html and display a preview

<html>
<head>
    <title>Upload and Preview Multiple Images</title>
  <style>
        .preview-image {
            width: 150px;
            height: 150px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <input type="file" id="imageInput" accept="image/*" multiple>
    <div id="imagePreview"></div>

imageInput.addEventListener('change', function () {
            imagePreview.innerHTML = ''; // Clear previous previews

const files = imageInput.files;

for (const file of files) {
                const reader = new FileReader();

reader.onload = function (e) {
                    const imgElement = document.createElement('img');
                    imgElement.src = e.target.result;
                    imgElement.className = 'preview-image';
                    imagePreview.appendChild(imgElement);
                };

reader.readAsDataURL(file);
            }
        });
    </script>

</body>
</html>

How to upload multiple image in html and display a preview

You may like these posts :

Write Your Comment