<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本和图片上传</title> <style> body { font-family: Arial, sans-serif; max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #f9f9f9; } h2 { text-align: center; } label { display: block; margin: 10px 0 5px; } input[type="text"], input[type="file"] { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } img { max-width: 300px; display: block; margin: 20px auto; } #responseImage { display: none; margin-top: 20px; } /* Loading Overlay */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 1000; display: flex; justify-content: center; align-items: center; display: none; } .loading-spinner { border: 4px solid #007bff; border-top: 4px solid transparent; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <h2>填写昵称和上传头像</h2> <form id="uploadForm"> <div> <label for="textInput">输入昵称:</label> <input type="text" id="textInput" placeholder="请输入昵称" required /> </div> <div> <label for="fileInput">上传头像:</label> <input type="file" id="fileInput" accept="image/*" required /> </div> <button type="submit">提交</button> </form> <div id="previewContainer" style="display: none;"> <h3>图片预览:</h3> <img id="imagePreview" alt="Uploaded Image" /> </div> <img id="responseImage" alt="Response Image" /> <!-- Loading Overlay --> <div id="loadingOverlay" class="loading-overlay"> <div class="loading-spinner"></div> </div> <script> const form = document.getElementById('uploadForm'); const textInput = document.getElementById('textInput'); const fileInput = document.getElementById('fileInput'); const previewContainer = document.getElementById('previewContainer'); const imagePreview = document.getElementById('imagePreview'); const responseImage = document.getElementById('responseImage'); fileInput.addEventListener('change', function(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { imagePreview.src = e.target.result; previewContainer.style.display = 'block'; }; reader.readAsDataURL(file); } }); form.addEventListener('submit', async function(event) { event.preventDefault(); loadingOverlay.style.display = 'flex'; const formData = new FormData(); formData.append('text', textInput.value); formData.append('image', fileInput.files[0]); try { // const response = await fetch('http://zdl-admin.test/api/upload', { const response = await fetch('https://htnewa.jiuweiyun.cn/api/upload', { method: 'POST', body: formData, }); if (response.ok) { const data = await response.json(); console.log('上传成功:', data); // 假设接口返回一个图片URL responseImage.src = data.imageUrl; // 请根据实际返回的结构修改 responseImage.style.display = 'block'; } else { console.error('上传失败:', response.statusText); alert('上传失败,请重试!'); } } catch (error) { console.error('网络错误:', error); alert('网络错误,请重试!'); } loadingOverlay.style.display = 'none'; // 重置表单 textInput.value = ''; fileInput.value = ''; imagePreview.src = ''; previewContainer.style.display = 'none'; }); </script> </body> </html>