<input type="file" id="fileInput" multiple>
<div id="message"></div>
document.getElementById('fileInput').addEventListener('change', function(event) {
var files = event.target.files;
var messageDiv = document.getElementById('message');
messageDiv.innerHTML = ''; // Clear previous messages
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Check if file size exceeds 1MB
if (file.size > 1048576) { // 1MB in bytes
messageDiv.innerHTML += `<p>${file.name} is too big! Maximum file size is 1MB.</p>`;
}
}
if (messageDiv.innerHTML === '') {
messageDiv.innerHTML = '<p>All files are within the size limit.</p>';
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.