mirror of
https://github.com/BlueSkyXN/WorkerJS_CloudFlare_ImageBed.git
synced 2024-11-16 03:32:26 +08:00
99 lines
4.0 KiB
HTML
99 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>TGPH Image Hosting</title>
|
||
<!--
|
||
本代码完全开源，仅供学习CloudFlare Page和Worker组件编程使用
|
||
仓库地址 https://github.com/BlueSkyXN/WorkerJS_CloudFlare_ImageBed
|
||
不提供任何免费的技术支持、指导、问题解答，请按GitHub标准用法进行issue等方式交互
|
||
请勿滥用本代码，违规使用后果自负，任何操作和后果均与本人无关
|
||
API接口均需要使用者自行解决，本人不提供任何API接口服务
|
||
不得在中国大陆地区使用本代码
|
||
-->
|
||
<style>
|
||
footer {
|
||
font-size: 12px; /* 设置较小的字号 */
|
||
}
|
||
hr {
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a href="https://github.com/BlueSkyXN/WorkerJS_CloudFlare_ImageBed" target="_blank" title="Visit GitHub Repository">
|
||
<img src="https://icons.iconarchive.com/icons/iconoir-team/iconoir/48/github-circle-icon.png" width="48" height="48">
|
||
</a>
|
||
<h1>TGPH Image Hosting</h1>
|
||
<hr>
|
||
<form id="uploadForm">
|
||
<input type="file" name="file" id="fileInput" required />
|
||
<select name="apiOption" id="apiOption">
|
||
<option value="https://telegra.ph/upload">TGPH-Official</option>
|
||
<option value="https://telegraph.cachefly.net/upload">TGPH-Cachefly</option>
|
||
</select>
|
||
<button type="submit">Upload</button>
|
||
</form>
|
||
<input type="checkbox" id="subOption" />
|
||
<label for="subOption">Enable TGPH-SUB</label>
|
||
<hr>
|
||
<div id="result"></div>
|
||
<button id="copyButton" style="display:none;">Copy</button>
|
||
<script>
|
||
document.getElementById('uploadForm').addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
const formData = new FormData();
|
||
formData.append('file', document.getElementById('fileInput').files[0]);
|
||
const apiOption = document.getElementById('apiOption').value;
|
||
|
||
try {
|
||
const response = await fetch(apiOption, {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
const data = await response.json();
|
||
const imageUrl = 'https://telegra.ph' + data[0].src;
|
||
processImage(imageUrl);
|
||
} catch (error) {
|
||
console.error('Upload failed:', error);
|
||
}
|
||
});
|
||
|
||
function processImage(imageUrl) {
|
||
document.getElementById('result').innerHTML = 'URL: <a href="' + imageUrl + '" target="_blank">' + imageUrl + '</a>';
|
||
document.getElementById('copyButton').style.display = 'inline';
|
||
|
||
if (document.getElementById('subOption').checked) {
|
||
generateSubUrls(imageUrl).forEach(url => {
|
||
const urlElement = document.createElement('div');
|
||
urlElement.innerHTML = 'URL: <a href="' + url + '" target="_blank">' + url + '</a>';
|
||
document.getElementById('result').appendChild(urlElement);
|
||
});
|
||
}
|
||
|
||
document.getElementById('copyButton').addEventListener('click', function() {
|
||
navigator.clipboard.writeText(imageUrl).then(() => {
|
||
alert('Image URL copied to clipboard!');
|
||
});
|
||
});
|
||
}
|
||
|
||
function generateSubUrls(imageUrl) {
|
||
return [
|
||
imageUrl.replace('https://telegra.ph', 'https://telegraph.cachefly.net'),
|
||
// 添加其他替换规则...
|
||
];
|
||
}
|
||
</script>
|
||
<hr>
|
||
<footer>
|
||
<p>建议上传5M以内的JPG/PNG/JPEG/GIF图像、MP4视频</p>
|
||
<p>文件格式兼容：jpg/jpeg/png/gif/m4v/mp4/jfif/pjpeg</p>
|
||
<p>注意不兼容webp/mkv等格式和非图像视频格式的文件、大于5MB的文件</p>
|
||
<p>该源码开源，仅供学习JS使用，违规使用后果自负</p>
|
||
</footer>
|
||
</body>
|
||
</html>
|