More than 1 file upload

<!DOCTYPE html>
<html>
<head>
  <title>Upload Multiple Images or PDFs</title>
  <style>
    #uploadBox {
      border: 2px dashed #aaa;
      padding: 20px;
      width: 300px;
      text-align: center;
      margin: 50px auto;
      border-radius: 10px;
    }
    #fileList {
      margin-top: 20px;
      text-align: left;
    }
  </style>
</head>
<body>

<div id="uploadBox">
  <h3>Upload Files</h3>
  <input type="file" id="fileInput" multiple accept="image/*,.pdf">
  <div id="fileList"></div>
</div>
    <script>
        const fileInput = document.getElementById('fileInput');
        const fileList = document.getElementById('fileList');

        fileInput.addEventListener('change', function () {
            // Check max file limit
            if (fileInput.files.length > 5) {
                alert("Aap maximum 5 files hi upload kar sakte hain.");
                fileInput.value = ""; // Clear the file input
                fileList.innerHTML = ""; // Clear file list
                return;
            }

            // Show selected files
            fileList.innerHTML = ""; // Clear previous list
            const files = fileInput.files;

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                let fileName = file.name;

                // Truncate file name if longer than 15 characters
                if (fileName.length > 15) {
                    fileName = fileName.substring(0, 15) + "...";
                }

                const li = document.createElement("div");
                li.className = "fileItem";
                li.textContent = `${i + 1}.  ${fileName} (${(file.size / 1024).toFixed(2)} KB)`;
                fileList.appendChild(li);
            }

        });
    </script>

</body>
</html>
HTMLify

Share this file:

Comments
