单页上传下载不限速文件床接口-清玖博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload File to GoFile</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        .upload-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #f9f9f9;
        }
        .upload-container h2 {
            text-align: center;
        }
        .upload-container input[type="file"] {
            margin-bottom: 20px;
            width: 100%;
        }
        .upload-container button {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .upload-container button:hover {
            background-color: #218838;
        }
        .progress-container {
            margin: 15px 0;
            background-color: #e9ecef;
            border-radius: 5px;
            height: 20px;
            display: none;
        }
        .progress-bar {
            height: 100%;
            background-color: #4CAF50;
            border-radius: 5px;
            width: 0%;
            transition: width 0.3s ease;
        }
        .progress-text {
            text-align: center;
            margin-top: 5px;
            font-size: 14px;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 5px;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div class="upload-container">
        <h2>Upload File to GoFile</h2>
        <input type="file" id="fileInput">
        <button onclick="uploadFile()">Upload</button>
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="progress-text" id="progressText"></div>
        <div class="result" id="result"></div>
    </div>

    <script>
        function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const resultDiv = document.getElementById('result');
            const progressBar = document.getElementById('progressBar');
            const progressContainer = document.querySelector('.progress-container');
            const progressText = document.getElementById('progressText');

            if (fileInput.files.length === 0) {
                resultDiv.textContent = '请选择要上传的文件';
                return;
            }

            const file = fileInput.files[0];
            const formData = new FormData();
            formData.append('file', file);

            // 重置显示
            resultDiv.textContent = '';
            progressBar.style.width = '0%';
            progressText.textContent = '0%';
            progressContainer.style.display = 'block';

            const xhr = new XMLHttpRequest();
            
            xhr.upload.addEventListener('progress', (e) => {
                if (e.lengthComputable) {
                    const percent = Math.round((e.loaded / e.total) * 100);
                    progressBar.style.width = percent + '%';
                    progressText.textContent = percent + '%';
                }
            });

            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    progressContainer.style.display = 'none';
                    try {
                        const data = JSON.parse(xhr.responseText);
                        if (data.status === 'ok') {
                            const downloadPage = data.data.downloadPage;
                            resultDiv.innerHTML = `文件上传成功！<a href="${downloadPage}" target="_blank">下载页面</a>`;
                        } else {
                            resultDiv.textContent = '上传失败，请重试';
                        }
                    } catch (error) {
                        resultDiv.textContent = '发生错误，请重试';
                        console.error(error);
                    }
                }
            };

            xhr.open('POST', 'https://store1.gofile.io/contents/uploadfile', true);
            xhr.send(formData);
        }
    </script>
</body>
</html>

版权声明 1、本网站名称： 清玖博客
2、本站永久网址： www.uvsv.cn
3、本网站的文章部分内容来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7、文章版权归作者所有，未经允许请勿转载。本站内所有文章为站长总结以及部分网络资源转载或网友投稿,若有侵权行为,请携带相关证明联系博主

THE END

网络技术
# 技术教程 # 接口 # 上传下载

单页上传下载不限速文件床接口

请登录后发表评论