Easily convert your Zip files to JPG format using our efficient HTML code. Save time and effort with our user-friendly Zip to JPG Converter. Try it now!
sumply Click on Copy Button and all Code Copy👇👇👇👇
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ZIP to JPG Converter | Modern Image Converter</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 2rem; } .container { max-width: 1200px; margin: 0 auto; background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .header { text-align: center; margin-bottom: 2rem; } .header h1 { color: #2d3748; font-size: 2.5rem; margin-bottom: 0.5rem; } .header p { color: #718096; } .converter-section { display: flex; gap: 2rem; margin-bottom: 2rem; } .file-drop-area { border: 2px dashed #cbd5e0; border-radius: 10px; padding: 2rem; text-align: center; cursor: pointer; transition: all 0.3s ease; flex: 1; } .file-drop-area:hover { border-color: #667eea; background: #f7fafc; } .file-input { display: none; } .preview-section { flex: 1; background: #f7fafc; border-radius: 10px; padding: 1rem; } .file-list { list-style: none; margin-top: 1rem; } .processing-bar { height: 10px; background: #e2e8f0; border-radius: 5px; overflow: hidden; margin: 1rem 0; display: none; } .processing-progress { width: 0%; height: 100%; background: #48bb78; transition: width 0.3s ease; } .output-section { margin-top: 2rem; display: none; } .converted-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .converted-image { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .converted-image img { width: 100%; height: 150px; object-fit: cover; } .download-btn { position: absolute; bottom: 10px; right: 10px; background: #48bb78; color: white; padding: 5px 10px; border-radius: 5px; cursor: pointer; transition: background 0.3s ease; } .download-btn:hover { background: #38a169; } .action-btns { display: flex; gap: 1rem; margin-top: 1rem; justify-content: center; } .btn { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } .btn:hover { background: #5a67d8; transform: translateY(-2px); } .help-section { margin-top: 2rem; background: #f7fafc; padding: 1rem; border-radius: 10px; } /* Responsive Design */ @media (max-width: 768px) { .converter-section { flex-direction: column; } } </style></head><body> <div class="container"> <div class="header"> <h1>ZIP to JPG Converter</h1> <p>Convert your ZIP archives to JPG images instantly</p> </div> <div class="converter-section"> <div class="file-drop-area" id="dropZone"> <i class="fas fa-file-archive fa-3x" style="color: #667eea;"></i> <h3 style="margin: 1rem 0;">Drag & Drop ZIP File</h3> <p>or</p> <button class="btn" onclick="document.getElementById('fileInput').click()"> Browse Files </button> <input type="file" id="fileInput" class="file-input" accept=".zip"> </div> <div class="preview-section"> <h3>Selected Files</h3> <div class="processing-bar"> <div class="processing-progress"></div> </div> <ul class="file-list" id="fileList"></ul> <button class="btn" id="convertBtn" onclick="handleConversion()" disabled> <i class="fas fa-sync-alt"></i> Convert </button> </div> </div> <div class="output-section" id="outputSection"> <h3>Converted Images</h3> <div class="converted-images" id="convertedImages"></div> <div class="action-btns"> <button class="btn" id="downloadAllBtn" disabled> <i class="fas fa-download"></i> Download All </button> <button class="btn" onclick="resetConverter()"> <i class="fas fa-redo"></i> Convert Another </button> </div> </div> <div class="help-section"> <h3>How to Convert:</h3> <ol> <li>Click "Browse Files" or drag ZIP file to the drop zone</li> <li>Click "Convert" to process the ZIP file</li> <li>Preview and download converted images</li> </ol> <p style="margin-top: 1rem; color: #718096;"> <strong>Note:</strong> Supports ZIP files containing PNG, JPG, BMP images. Max file size: 100MB. Your files are processed locally and never uploaded. </p> </div> </div> <script> const dropZone = document.getElementById('dropZone'); const fileInput = document.getElementById('fileInput'); const outputSection = document.getElementById('outputSection'); const convertedImages = document.getElementById('convertedImages'); const processingBar = document.querySelector('.processing-bar'); const progress = document.querySelector('.processing-progress'); const convertBtn = document.getElementById('convertBtn'); const downloadAllBtn = document.getElementById('downloadAllBtn'); let zipFile = null; // Drag & Drop Handlers dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.style.borderColor = '#667eea'; }); dropZone.addEventListener('dragleave', () => { dropZone.style.borderColor = '#cbd5e0'; }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.style.borderColor = '#cbd5e0'; zipFile = e.dataTransfer.files[0]; handleFileSelection(zipFile); }); // File Input Handler fileInput.addEventListener('change', (e) => { zipFile = e.target.files[0]; handleFileSelection(zipFile); }); function handleFileSelection(file) { if (!file || !file.name.endsWith('.zip')) { alert('Please select a valid ZIP file'); return; } document.getElementById('fileList').innerHTML = `<li>${file.name}</li>`; convertBtn.disabled = false; } async function handleConversion() { if (!zipFile) { alert('Please select a ZIP file first'); return; } processingBar.style.display = 'block'; progress.style.width = '30%'; convertBtn.disabled = true; try { const zip = await JSZip.loadAsync(zipFile); const images = []; let totalFiles = Object.keys(zip.files).length; let processedFiles = 0; for (const [relativePath, zipEntry] of Object.entries(zip.files)) { if (!zipEntry.dir && isImageFile(zipEntry.name)) { const imgData = await zip.file(zipEntry.name).async('blob'); images.push({ name: zipEntry.name, data: imgData }); processedFiles++; progress.style.width = `${30 + (processedFiles / totalFiles) * 70}%`; } } displayImages(images); processingBar.style.display = 'none'; outputSection.style.display = 'block'; downloadAllBtn.disabled = false; } catch (error) { alert('Error processing ZIP file: ' + error.message); resetConverter(); } } function isImageFile(filename) { return /\.(jpe?g|png|bmp)$/i.test(filename); } function displayImages(images) { convertedImages.innerHTML = ''; images.forEach(img => { const url = URL.createObjectURL(img.data); const div = document.createElement('div'); div.className = 'converted-image'; div.innerHTML = ` <img src="${url}" alt="${img.name}"> <div class="download-btn" onclick="downloadImage('${img.name}', '${url}')"> <i class="fas fa-download"></i> </div> `; convertedImages.appendChild(div); }); } function downloadImage(filename, url) { const a = document.createElement('a'); a.href = url; a.download = filename.replace(/\.[^/.]+$/, "") + '.jpg'; document.body.appendChild(a); a.click(); document.body.removeChild(a); } function resetConverter() { fileInput.value = ''; zipFile = null; convertedImages.innerHTML = ''; outputSection.style.display = 'none'; document.getElementById('fileList').innerHTML = ''; processingBar.style.display = 'none'; convertBtn.disabled = true; downloadAllBtn.disabled = true; } // Initialize downloadAllBtn.addEventListener('click', () => { const downloadLinks = document.querySelectorAll('.converted-image .download-btn'); downloadLinks.forEach(link => link.click()); }); </script></body></html>