exaup/title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <style> body { background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%); font-family: "Segoe UI", "Helvetica Neue", sans-serif; } .uploader-container { max-width: 600px; margin: 40px auto; position: relative; } .uploader-title { transform: rotate(-1deg); margin-bottom: 30px; color: #333; text-shadow: 2px 2px 3px rgba(0,0,0,0.1); font-weight: 700; position: relative; z-index: 2; } .uploader-card { background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.08), 0 6px 12px rgba(0,0,0,0.1); padding: 25px; transform: rotate(0.5deg); position: relative; overflow: hidden; } .uploader-card::before { content: ""; position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); border-radius: 50%; opacity: 0.5; } .file-drop-area { border: 2px dashed #ccd7e6; border-radius: 8px; padding: 25px; text-align: center; margin-bottom: 20px; transition: all 0.3s; background: rgba(245, 247, 250, 0.6); transform: rotate(-0.5deg); position: relative; } .file-drop-area:hover { border-color: #6e8efb; background: rgba(245, 247, 250, 0.9); } .file-icon { font-size: 36px; color: #a8b4c5; margin-bottom: 10px; } .password-container { position: relative; margin-bottom: 20px; transform: rotate(-0.3deg); } .password-input { border-radius: 8px; border: 1px solid #ccd7e6; padding: 12px 15px; transition: all 0.3s; background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); } .password-input:focus { border-color: #6e8efb; box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.25); } .upload-btn { background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); border: none; border-radius: 8px; padding: 12px; font-weight: 600; letter-spacing: 0.5px; transition: all 0.3s; box-shadow: 0 4px 10px rgba(110, 142, 251, 0.3); transform: rotate(0.7deg); width: 100%; } .upload-btn:hover { transform: translateY(-2px) rotate(0.7deg); box-shadow: 0 6px 15px rgba(110, 142, 251, 0.4); background: linear-gradient(135deg, #5d7df9 0%, #9a65de 100%); } .download-link-container { margin-top: 25px; text-align: center; font-size: 15px; transform: rotate(-0.8deg); } .file-list-container { max-height: 300px; overflow-y: auto; margin-bottom: 20px; display: none; } .file-list { list-style: none; padding: 0; margin: 0; } .file-item { background: rgba(110, 142, 251, 0.1); border-radius: 8px; padding: 12px 15px; margin-bottom: 10px; border-left: 3px solid #6e8efb; transform: rotate(0.3deg); position: relative; transition: all 0.2s; } .file-item:hover { background: rgba(110, 142, 251, 0.15); } .file-name { font-weight: 500; color: #333; word-break: break-all; padding-right: 30px; } .file-size { font-size: 14px; color: #777; margin-top: 5px; } .file-remove-btn { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); border: 1px solid #e0e0e0; color: #999; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .file-remove-btn:hover { background: #ff5252; color: white; border-color: #ff5252; } .progress { height: 6px; border-radius: 3px; overflow: hidden; background-color: #eee; margin-top: 5px; position: relative; } .progress-bar { background-color: #6e8efb; width: 0%; transition: width 0.2s; text-align: center; color: #fff; font-size: 12px; line-height: 1.6; } .file-item .progress { display: none; } .upload-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; border-radius: 12px; display: none; } .upload-spinner { width: 40px; height: 40px; border: 4px solid rgba(110, 142, 251, 0.3); border-radius: 50%; border-top-color: #6e8efb; animation: spin 1s ease-in-out infinite; margin-bottom: 15px; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 576px) { .uploader-card { transform: none; padding: 20px; } .file-drop-area, .password-container { transform: none; } .file-item { transform: none !important; } .upload-btn { transform: none; } .download-link-container { transform: none; } } </style> </head> <body> <div class="uploader-container"> <h2 class="uploader-title">Exa-UP</h2> <div class="uploader-card">  <div class="upload-overlay" id="uploadOverlay"> <div class="upload-spinner"></div> <div class="upload-status">アップロード中...</div> <div class="upload-progress-text" id="uploadProgressText">0%</div> </div> <div class="file-drop-area" id="dropArea"> <div class="file-icon">📁</div> <p>複数ファイルをドラッグ&ドロップするか、クリックして選択</p> <input type="file" id="fileInput" multiple style="opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;"> </div> <div id="fileListContainer" class="file-list-container"> <ul id="fileList" class="file-list"></ul> </div> <div class="password-container"> <input type="text" id="passwordInput" class="form-control password-input" placeholder="パスワード（任意）"> </div> <div class="progress" id="uploadProgress"> <div class="progress-bar" id="uploadProgressBar">0%</div> </div> <button class="btn upload-btn" onclick="uploadAllFiles()">アップロード</button> </div> <div class="download-link-container" id="uploadResult"></div> </div> <script> const dropArea = document.getElementById('dropArea'); const fileInput = document.getElementById('fileInput'); const fileListContainer = document.getElementById('fileListContainer'); const fileList = document.getElementById('fileList'); const uploadProgress = document.getElementById('uploadProgress'); const uploadProgressBar = document.getElementById('uploadProgressBar'); const uploadResult = document.getElementById('uploadResult'); const uploadOverlay = document.getElementById('uploadOverlay'); const uploadProgressText = document.getElementById('uploadProgressText'); let selectedFiles = []; //file fileInput.addEventListener('change', e => { const newFiles = Array.from(e.target.files); if (newFiles.length > 0) { selectedFiles = [...selectedFiles, ...newFiles]; updateFileList(); } }); function updateFileList() { if (selectedFiles.length === 0) { fileListContainer.style.display = "none"; fileList.innerHTML = ""; return; } fileListContainer.style.display = "block"; fileList.innerHTML = ""; selectedFiles.forEach((file, index) => { const li = document.createElement("li"); li.className = "file-item"; li.dataset.index = index; li.innerHTML = ` <div class="file-name">${file.name}</div> <div class="file-size">${formatFileSize(file.size)}</div> <div class="progress"> <div class="progress-bar" style="width: 0%">0%</div> </div> <button type="button" class="file-remove-btn" onclick="removeFile(${index})">×</button> `; fileList.appendChild(li); }); } //delete function removeFile(index) { selectedFiles.splice(index, 1); updateFileList(); } function formatFileSize(size) { if (size < 1024) { return size + " B"; } else if (size < 1024 * 1024) { return (size / 1024).toFixed(2) + " KB"; } else if (size < 1024 * 1024 * 1024) { return (size / (1024 * 1024)).toFixed(2) + " MB"; } else { return (size / (1024 * 1024 * 1024)).toFixed(2) + " GB"; } } //drop ;['dragenter','dragover','dragleave','drop'].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false); }); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } ;['dragenter','dragover'].forEach(eventName => { dropArea.addEventListener(eventName, () => { dropArea.style.borderColor = '#6e8efb'; dropArea.style.background = 'rgba(245, 247, 250, 0.9)'; }, false); }); ;['dragleave','drop'].forEach(eventName => { dropArea.addEventListener(eventName, () => { dropArea.style.borderColor = '#ccd7e6'; dropArea.style.background = 'rgba(245, 247, 250, 0.6)'; }, false); }); dropArea.addEventListener('drop', e => { const dt = e.dataTransfer; const newFiles = Array.from(dt.files); selectedFiles = [...selectedFiles, ...newFiles]; updateFileList(); }); //まとめて async function uploadAllFiles() { if (selectedFiles.length === 0) { alert("ファイルを選択してください"); return; } uploadResult.innerHTML = ""; // 結果をクリア // 全ファイルの進捗バーを表示 const fileItems = document.querySelectorAll('.file-item'); fileItems.forEach(item => { const progressBar = item.querySelector('.progress'); progressBar.style.display = "block"; }); // 全体の進捗バー初期化 uploadProgress.style.display = "block"; uploadProgressBar.style.width = "0%"; uploadProgressBar.textContent = "0%"; // オーバーレイ表示 uploadOverlay.style.display = "flex"; uploadProgressText.textContent = "0%"; // アップロードボタンをdisable const uploadBtn = document.querySelector(".upload-btn"); const originalText = uploadBtn.innerHTML; uploadBtn.innerHTML = "アップロード中..."; uploadBtn.disabled = true; try { // FormDataを作成し、全ファイルをまとめてappend const formData = new FormData(); selectedFiles.forEach(file => formData.append("files", file)); // パスワード const password = document.getElementById("passwordInput").value; formData.append("password", password); // XMLHttpRequestで送信 const xhr = new XMLHttpRequest(); xhr.open("POST", "/upload"); // 進捗イベント xhr.upload.onprogress = (e) => { if (e.lengthComputable) { const percent = (e.loaded / e.total) * 100; const pText = `${percent.toFixed(0)}%`; // 小数点以下切り捨て // 全体の進捗バー更新 uploadProgressBar.style.width = pText; uploadProgressBar.textContent = pText; uploadProgressText.textContent = pText; // 個別ファイルの進捗を均等に配分 const fileCount = selectedFiles.length; if (fileCount > 0) { const perFilePercent = percent / fileCount; fileItems.forEach((item, idx) => { const itemBar = item.querySelector('.progress-bar'); let itemPercent = 0; // 完全にシーケンシャルなアップロードを仮定 if (idx < Math.floor(percent / (100 / fileCount))) { // 既にアップロード完了したファイル itemPercent = 100; } else if (idx === Math.floor(percent / (100 / fileCount))) { // 現在アップロード中のファイル itemPercent = (percent % (100 / fileCount)) / (100 / fileCount) * 100; } itemBar.style.width = `${itemPercent}%`; itemBar.textContent = `${Math.round(itemPercent)}%`; }); } } }; // 受信完了 xhr.onload = () => { // オーバーレイ非表示 uploadOverlay.style.display = "none"; if (xhr.status === 200) { try { const res = JSON.parse(xhr.responseText); if (res.url) { uploadResult.innerHTML = ` <p>アップロード完了！</p> <a class="btn btn-success" href="${res.url}" target="_blank"> ダウンロードページへ </a> `; // 全ファイルの進捗を100%に fileItems.forEach(item => { const itemBar = item.querySelector('.progress-bar'); itemBar.style.width = "100%"; itemBar.textContent = "100%"; }); } else { uploadResult.innerHTML = `<p class="text-danger">エラー: レスポンスにURLがありません</p>`; } } catch (err) { uploadResult.innerHTML = `<p class="text-danger">レスポンス解析エラー</p>`; } } else { let errMsg = "アップロードに失敗しました"; try { const res = JSON.parse(xhr.responseText); if (res.error) { errMsg = res.error; } } catch(_) {} uploadResult.innerHTML = `<p class="text-danger">${errMsg}</p>`; } }; // 通信エラー xhr.onerror = () => { // オーバーレイ非表示 uploadOverlay.style.display = "none"; uploadResult.innerHTML = `<p class="text-danger">ネットワークエラーが発生しました</p>`; }; // 送信開始 xhr.send(formData); } catch (error) { // オーバーレイ非表示 uploadOverlay.style.display = "none"; uploadResult.innerHTML = `<p class="text-danger">エラー: ${error.message}</p>`; } finally { uploadBtn.innerHTML = originalText; uploadBtn.disabled = false; } } </script> </body> </html>