<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>';
    }
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.