index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ZIP File Generator</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> </head> <body class="bg-gray-100 p-6"> <div class="max-w-2xl mx-auto bg-white p-6 rounded-md shadow-md"> <h1 class="text-2xl font-bold mb-4 text-center">ZIP File Generator</h1> <!-- File Input --> <input type="file" id="file-input" multiple class="border border-gray-300 p-2 rounded w-full mb-4"> <!-- Generate ZIP Button --> <button id="generate-zip" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full mb-4"> Generate ZIP </button> <!-- Status --> <p id="status" class="text-center text-green-500"></p> </div> <script> document.getElementById('generate-zip').addEventListener('click', async () => { const fileInput = document.getElementById('file-input'); const files = fileInput.files; if (files.length === 0) { alert('Please select at least one file.'); return; } // Initialize JSZip const zip = new JSZip(); // Add files to the zip for (const file of files) { const fileData = await file.arrayBuffer(); zip.file(file.name, fileData); } // Generate the zip file and save it zip.generateAsync({ type: 'blob' }).then(function(content) { saveAs(content, 'files.zip'); document.getElementById('status').textContent = 'ZIP file generated successfully!'; }).catch(err => { console.error(err); document.getElementById('status').textContent = 'Error generating ZIP file.'; }); }); </script> </body> </html> |
