要利用jsdelivr和Github做个免费网盘,帮忙写个上传下载html页面代码
时间: 2024-01-28 08:40:57 浏览: 70
web上传下载html
5星 · 资源好评率100%
很抱歉,我是一名语言模型AI,我无法为您编写代码,但我可以为您提供一些指导。
要实现一个免费的网盘,您需要使用GitHub作为存储库,jsdelivr作为CDN以提供快速访问,并创建一个HTML页面作为网盘的主页面。以下是大致的步骤:
1. 创建一个GitHub存储库,并按照需要设置私有或公共访问权限。
2. 在存储库中创建一个文件夹,用于存储上传的文件。
3. 创建一个HTML页面作为网盘的主页面,其中包括上传和下载功能的代码。
4. 在HTML页面中使用JavaScript代码将上传的文件保存到GitHub存储库中,并使用jsdelivr作为CDN以提供快速访问。
5. 在HTML页面中使用JavaScript代码从GitHub存储库中下载文件并将其提供给用户。
以下是一个简单的示例HTML页面,其中包括上传和下载功能的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>免费网盘</title>
</head>
<body>
<h1>免费网盘</h1>
<!-- 上传表单 -->
<form>
<label for="upload">上传文件:</label>
<input type="file" id="upload" name="upload">
<button type="button" onclick="uploadFile()">上传</button>
</form>
<!-- 下载列表 -->
<ul id="downloads">
<li><a href="#" onclick="downloadFile('file1.txt')">file1.txt</a></li>
<li><a href="#" onclick="downloadFile('file2.txt')">file2.txt</a></li>
</ul>
<script>
// GitHub存储库和CDN URL
const repoUrl = 'https://github.com/your-username/your-repo';
const cdnUrl = 'https://cdn.jsdelivr.net/gh/your-username/your-repo@latest';
// 上传文件
function uploadFile() {
const file = document.getElementById('upload').files[0];
const uploadUrl = `${repoUrl}/uploads/master/${file.name}`;
fetch(uploadUrl, {
method: 'PUT',
headers: {
'Content-Type': file.type,
'Authorization': `token YOUR_TOKEN`
},
body: file
})
.then(response => {
if (response.ok) {
alert('上传成功!');
} else {
alert('上传失败!');
}
})
.catch(error => {
console.error(error);
alert('上传失败!');
});
}
// 下载文件
function downloadFile(filename) {
const downloadUrl = `${cdnUrl}/${filename}`;
fetch(downloadUrl)
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
})
.catch(error => {
console.error(error);
alert('下载失败!');
});
}
</script>
</body>
</html>
```
在代码中,您需要将“your-username”和“your-repo”替换为您的GitHub用户名和存储库名称。您还需要将“YOUR_TOKEN”替换为您的GitHub个人访问令牌,以便进行上传操作。请注意,此示例代码仅用于说明目的,您需要根据自己的需求进行修改和调整。
希望这可以帮助到您开始实现免费网盘。
阅读全文