BingGan
她说爱你，没说只爱你!
-
360官方API构建高效便捷的图片上传单页源码 页面采用了响应式设计原则，确保在各种设备上都能提供良好的用户体验。通过meta viewport标签设置视口属性，保证页面能适应不同屏幕尺寸。 新建一个html单页把源码复制进去，然后修改背景图路径即可。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>360图床文件上传 - 双虹云博客</title> <style> /* 重置默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 设置页面的字体和添加背景图片 */ body { font-family: Arial, sans-serif; background: url('static/images/background.png') no-repeat center center fixed; /* 使用服务器上的路径 */ background-size: cover; /* 保证背景图片覆盖整个视窗 */ color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } /* 容器样式 */ .container { background-color: rgba(255, 255, 255, 0.9); /* 使用半透明白色背景，以便在图片背景上更清晰地显示内容 */ padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 100%; max-width: 500px; text-align: center; } /* 标题样式 */ h2 { font-size: 24px; margin-bottom: 20px; color: #333; } /* 文件输入框样式 */ input[type="file"] { display: block; margin: 0 auto 20px; padding: 8px; background-color: #f7f7f7; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; color: #333; } /* 按钮样式 */ button { background-color: #007BFF; color: #fff; padding: 12px 20px; font-size: 16px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } /* 按钮悬浮效果 */ button:hover { background-color: #0056b3; } /* 进度条样式 */ .progress-bar { width: 100%; height: 30px; background-color: #ddd; border-radius: 4px; margin-top: 20px; overflow: hidden; } .progress-fill { height: 100%; background-color: #4caf50; width: 0; line-height: 30px; text-align: center; color: white; } /* 上传结果区域样式 */ .result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; background-color: #f9f9f9; font-size: 16px; color: #333; min-height: 40px; } /* 错误或成功的提示信息样式 */ .result.success { border-color: #28a745; background-color: #e9f7e8; } .result.error { border-color: #dc3545; background-color: #f8d7da; } /* 显示图片的样式 */ .uploaded-image { margin-top: 20px; max-width: 100%; height: auto; border-radius: 4px; border: 1px solid #ddd; } </style> </head> <body> <div class="container"> <h2>图片上传-双虹云</h2> <form id="uploadForm"> <input type="file" id="fileInput" name="file" accept="image/*" required /> <button type="submit">上传文件</button> </form> <div id="result" class="result"></div> <!-- 进度条 --> <div class="progress-bar"> <div class="progress-fill" id="progressFill">0%</div> </div> </div> <script> const form = document.getElementById('uploadForm'); const resultDiv = document.getElementById('result'); const progressBar = document.querySelector('.progress-fill'); form.addEventListener('submit', (e) => { e.preventDefault(); const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; if (!file) { resultDiv.innerHTML = '<p class="error">请先选择文件！</p>'; return; } const formData = new FormData(); formData.append('file', file); const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.xinyew.cn/api/360tc', true); // 监听上传进度事件 xhr.upload.onprogress = function(event) { if (event.lengthComputable) { const percentComplete = (event.loaded / event.total) * 100; progressBar.style.width = percentComplete + '%'; progressBar.innerHTML = Math.round(percentComplete) + '%'; } }; xhr.onload = function() { if (xhr.status === 200) { const data = JSON.parse(xhr.responseText); if (data.errno === 0) { resultDiv.innerHTML = ` <p>上传成功！</p> <p>图片链接: <a href="${data.data.url}" target="_blank">${data.data.url}</a></p> <p>图片文件名: ${data.data.imgFile}</p> <img src="${data.data.url}" alt="上传的图片" class="uploaded-image" /> `; } else { resultDiv.innerHTML = `<p class="error">${data.error}</p>`; } } else { resultDiv.innerHTML = `<p class="error">请求失败：${xhr.statusText}</p>`; } }; xhr.onerror = function() { resultDiv.innerHTML = '<p class="error">请求发生错误。</p>'; }; xhr.send(formData); }); </script> </body> </html>