<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>File Storage Interface</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } h1 { text-align: center; } #file-list { list-style-type: none; padding: 0; } #file-list li { margin-bottom: 10px; padding: 10px; background-color: #f0f0f0; border-radius: 5px; } #file-list button { margin-left: 10px; } </style> </head> <body> <h1>File Storage Interface</h1> <input type="file" id="file-input"> <button onclick="uploadFile()">Upload</button> <h2>File List</h2> <ul id="file-list"></ul> <script> class FileStorage { constructor() { this.storage = localStorage; } upload(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (event) => { const fileData = event.target.result; const fileInfo = { name: file.name, size: file.size, type: file.type, data: fileData }; this.storage.setItem(file.name, JSON.stringify(fileInfo)); resolve(fileInfo); }; reader.onerror = (error) => reject(error); reader.readAsDataURL(file); }); } download(fileName) { const fileInfo = this.getFileInfo(fileName); if (!fileInfo) { throw new Error('File not found'); } const link = document.createElement('a'); link.href = fileInfo.data; link.download = fileInfo.name; link.click(); } delete(fileName) { this.storage.removeItem(fileName); } list() { return Object.keys(this.storage) .map(key => this.getFileInfo(key)) .filter(fileInfo => fileInfo !== null) .map(fileInfo => ({ name: fileInfo.name, size: fileInfo.size })); } stat(fileName) { const fileInfo = this.getFileInfo(fileName); if (!fileInfo) { throw new Error('File not found'); } return { name: fileInfo.name, size: fileInfo.size }; } getFileInfo(fileName) { try { const fileInfo = JSON.parse(this.storage.getItem(fileName)); if (fileInfo && fileInfo.name && fileInfo.size) { return fileInfo; } } catch (error) { console.warn(`Invalid file info for ${fileName}:`, error); } return null; } } const fileStorage = new FileStorage(); function uploadFile() { const fileInput = document.getElementById('file-input'); const file = fileInput.files[0]; if (file) { fileStorage.upload(file).then(() => { updateFileList(); fileInput.value = ''; }); } } function downloadFile(fileName) { fileStorage.download(fileName); } function deleteFile(fileName) { fileStorage.delete(fileName); updateFileList(); } function updateFileList() { const fileList = document.getElementById('file-list'); fileList.innerHTML = ''; const files = fileStorage.list(); files.forEach(file => { const li = document.createElement('li'); li.textContent = `${file.name} (${formatSize(file.size)})`; const downloadBtn = document.createElement('button'); downloadBtn.textContent = 'Download'; downloadBtn.onclick = () => downloadFile(file.name); const deleteBtn = document.createElement('button'); deleteBtn.textContent = 'Delete'; deleteBtn.onclick = () => deleteFile(file.name); li.appendChild(downloadBtn); li.appendChild(deleteBtn); fileList.appendChild(li); }); } function formatSize(bytes) { const units = ['B', 'KB', 'MB', 'GB', 'TB']; let size = bytes; let unitIndex = 0; while (size >= 1024 && unitIndex < units.length - 1) { size /= 1024; unitIndex++; } return `${size.toFixed(2)} ${units[unitIndex]}`; } updateFileList(); </script> </body> </html>