360免费图床HTML网站源码,使用文件直接上传,使用360官方的链接来做图床链接,
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,上传到服务器里面访问即可使用,复制到你的index.html即可
<!DOCTYPE html><html lang=“zh-CN”><head><meta charset=“UTF-8”><meta name=“viewport” content=“width=device-width, initial-scale=1.0”><title>文件上传</title><style>/* 重置默认样式 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 设置页面的字体和背景 */body {font-family: Arial, sans-serif;background-color: #f4f4f9;color: #333;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;}/* 容器样式 */.container {background-color: #fff;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;}/* 上传结果区域样式 */.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><script>// 获取表单和结果显示区域const form = document.getElementById(‘uploadForm’);const resultDiv = document.getElementById(‘result’);form.addEventListener(‘submit’, async (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);try {// 使用 fetch 发送请求const response = await fetch(‘https://api.xinyew.cn/api/360tc’, {method: ‘POST’,body: formData});const data = await response.json();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>`;}} catch (error) {resultDiv.innerHTML = `<p class=“error”>请求失败:${error.message}</p>`;}});</script></body></html>