360免费图床HTML网站源码-QQ沐编程

源码介绍

360免费图床HTML网站源码，使用文件直接上传，使用360官方的链接来做图床链接，

源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，上传到服务器里面访问即可使用

更多好看的特效代码可以搜索QQ沐编程，觉得有帮助的话可以CTRL+D收藏一下本站

效果截图

图片[1]-360免费图床HTML网站源码-QQ沐编程

源代码

<!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>

本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！

THE END