2024-03-26 14:11:18 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2024-03-27 15:13:48 +08:00
|
|
|
|
<title>OneAPI File Uploader</title>
|
|
|
|
|
|
<!-- INFO -->
|
|
|
|
|
|
<!--
|
|
|
|
|
|
本代码完全开源，仅供学习CloudFlare Page和Worker组件编程使用
|
|
|
|
|
|
仓库地址 https://github.com/BlueSkyXN/WorkerJS_CloudFlare_ImageBed
|
|
|
|
|
|
不提供任何免费的技术支持、指导、问题解答，请按GitHub标准用法进行issue等方式交互
|
|
|
|
|
|
请勿滥用本代码，违规使用后果自负，任何操作和后果均与本人无关
|
|
|
|
|
|
API接口均需要使用者自行解决，本人不提供任何API接口服务
|
|
|
|
|
|
不得在中国大陆地区使用本代码
|
|
|
|
|
|
-->
|
2024-03-26 14:11:18 +08:00
|
|
|
|
<!-- 引入 Bootstrap CSS -->
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.container {
|
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.result-item {
|
2024-03-26 14:20:02 +08:00
|
|
|
|
margin-top: 10px;
|
2024-03-26 14:31:26 +08:00
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
border-radius: 5px;
|
2024-03-26 14:35:42 +08:00
|
|
|
|
display: flex;
|
2024-03-26 14:53:16 +08:00
|
|
|
|
flex-direction: column; /* 不同框之间纵向排列 */
|
|
|
|
|
|
width: 100%; /* 设置结果框宽度为100% */
|
2024-03-26 14:35:42 +08:00
|
|
|
|
}
|
2024-03-26 14:43:21 +08:00
|
|
|
|
.preview-container {
|
2024-03-26 14:49:22 +08:00
|
|
|
|
max-width: calc(100% - 20px); /* 图片预览容器的最大宽度为外部框架宽度减去左右 padding */
|
2024-03-26 14:40:12 +08:00
|
|
|
|
max-height: calc(8 * 50px); /* 最大高度不超过8个上传按钮的高度 */
|
2024-03-26 14:43:21 +08:00
|
|
|
|
overflow: hidden; /* 超出部分隐藏 */
|
2024-03-26 14:49:22 +08:00
|
|
|
|
margin-top: 10px; /* 添加顶部间距 */
|
2024-03-26 14:53:16 +08:00
|
|
|
|
width: 100%; /* 设置预览容器宽度为100% */
|
2024-03-26 14:43:21 +08:00
|
|
|
|
}
|
|
|
|
|
|
.preview-img {
|
|
|
|
|
|
max-width: 100%; /* 图片预览的最大宽度为容器宽度 */
|
|
|
|
|
|
height: auto; /* 自适应高度 */
|
|
|
|
|
|
display: block; /* 防止图片下面产生空白 */
|
2024-03-26 14:11:18 +08:00
|
|
|
|
}
|
2024-03-26 14:49:22 +08:00
|
|
|
|
.copy-button, .file-name, .file-url {
|
|
|
|
|
|
display: inline-block; /* 按钮、文件名和URL在同一行 */
|
|
|
|
|
|
margin-bottom: 5px; /* 添加底部间距 */
|
|
|
|
|
|
}
|
2024-03-26 14:40:12 +08:00
|
|
|
|
.copy-button {
|
2024-03-26 14:49:22 +08:00
|
|
|
|
width: auto;
|
2024-03-26 14:40:12 +08:00
|
|
|
|
}
|
2024-03-26 14:11:18 +08:00
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
2024-03-27 15:13:48 +08:00
|
|
|
|
<h2>File Upload</h2>
|
2024-03-26 14:11:18 +08:00
|
|
|
|
<form id="upload-form">
|
|
|
|
|
|
<div class="form-group">
|
2024-03-27 15:13:48 +08:00
|
|
|
|
<label for="apiUrl">API Endpoint</label>
|
2024-03-27 15:24:48 +08:00
|
|
|
|
<input type="text" class="form-control" id="apiUrl" placeholder="Input API Endpoint with http(s)://***.***" required>
|
2024-03-26 14:11:18 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
2024-03-27 15:13:48 +08:00
|
|
|
|
<label for="fileInput">Select Files</label>
|
2024-03-26 14:11:18 +08:00
|
|
|
|
<input type="file" class="form-control-file" id="fileInput" multiple required>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
2024-03-27 15:13:48 +08:00
|
|
|
|
<label for="apiSelect">Select Endpoint</label>
|
2024-03-26 14:11:18 +08:00
|
|
|
|
<select class="form-control" id="apiSelect">
|
|
|
|
|
|
<option value="tgphimg">api-tgph-official</option>
|
2024-03-27 14:54:29 +08:00
|
|
|
|
<option value="58img">api-58img</option>
|
2024-03-26 14:11:18 +08:00
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
2024-03-26 14:20:02 +08:00
|
|
|
|
<div class="form-check mb-2">
|
|
|
|
|
|
<input class="form-check-input" type="checkbox" id="enablePreview">
|
|
|
|
|
|
<label class="form-check-label" for="enablePreview">
|
2024-03-27 15:13:48 +08:00
|
|
|
|
Preview
|
2024-03-26 14:20:02 +08:00
|
|
|
|
</label>
|
|
|
|
|
|
</div>
|
2024-03-27 15:13:48 +08:00
|
|
|
|
<button type="submit" class="btn btn-primary">Upload</button>
|
|
|
|
|
|
<button type="button" id="convertButton" class="btn btn-success" style="display: none;">Transform</button>
|
2024-03-26 14:11:18 +08:00
|
|
|
|
</form>
|
2024-03-26 14:20:02 +08:00
|
|
|
|
<div id="result" class="mt-3">
|
|
|
|
|
|
<!-- 上传结果将显示在这里 -->
|
2024-03-26 14:11:18 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 引入 jQuery 和 Bootstrap JS -->
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-03-27 15:01:34 +08:00
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
updateConvertButtonVisibility(); // 页面加载时更新按钮状态
|
2024-03-27 15:24:48 +08:00
|
|
|
|
setApiUrl();
|
2024-03-27 15:01:34 +08:00
|
|
|
|
document.getElementById('apiSelect').addEventListener('change', updateConvertButtonVisibility);
|
|
|
|
|
|
document.getElementById('upload-form').addEventListener('submit', handleFormSubmit);
|
|
|
|
|
|
document.getElementById('convertButton').addEventListener('click', function() {
|
|
|
|
|
|
// 在新窗口中打开 /tools/tgph 的 URL
|
|
|
|
|
|
window.open('/tools/tgph', '_blank');
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
2024-03-27 15:24:48 +08:00
|
|
|
|
function setApiUrl() {
|
|
|
|
|
|
const encodedApiEndpoint = '{{API_ENDPOINT_BASE64}}'; // 将"您的Base64编码字符串"替换为实际的Base64编码后的API地址
|
|
|
|
|
|
const decodedApiEndpoint = atob(encodedApiEndpoint);
|
|
|
|
|
|
document.getElementById('apiUrl').value = decodedApiEndpoint;
|
|
|
|
|
|
}
|
2024-03-27 15:01:34 +08:00
|
|
|
|
function updateConvertButtonVisibility() {
|
|
|
|
|
|
const convertButton = document.getElementById('convertButton');
|
|
|
|
|
|
const apiSelect = document.getElementById('apiSelect').value;
|
|
|
|
|
|
convertButton.style.display = apiSelect === 'tgphimg' ? '' : 'none';
|
|
|
|
|
|
}
|
|
|
|
|
|
function handleFormSubmit(e) {
|
2024-03-26 14:43:21 +08:00
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
const apiUrlInput = document.getElementById('apiUrl');
|
|
|
|
|
|
const fileInput = document.getElementById('fileInput');
|
|
|
|
|
|
const apiSelect = document.getElementById('apiSelect');
|
|
|
|
|
|
const resultContainer = document.getElementById('result');
|
|
|
|
|
|
const enablePreview = document.getElementById('enablePreview').checked;
|
|
|
|
|
|
// 清除旧的结果
|
|
|
|
|
|
resultContainer.innerHTML = '';
|
2024-03-26 14:53:16 +08:00
|
|
|
|
resultContainer.style.display = 'none';
|
2024-03-26 14:43:21 +08:00
|
|
|
|
for (const file of fileInput.files) {
|
|
|
|
|
|
const formData = new FormData();
|
|
|
|
|
|
formData.append('image', file);
|
|
|
|
|
|
const apiUrl = `${apiUrlInput.value}/upload/${apiSelect.value}`;
|
|
|
|
|
|
console.log('API URL:', apiUrl);
|
|
|
|
|
|
fetch(apiUrl, {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
body: formData,
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(response => response.text())
|
|
|
|
|
|
.then(data => {
|
|
|
|
|
|
const resultItem = document.createElement('div');
|
|
|
|
|
|
resultItem.className = 'result-item';
|
2024-03-26 14:53:16 +08:00
|
|
|
|
const resultContent = `
|
2024-03-26 14:49:22 +08:00
|
|
|
|
<div>
|
2024-03-27 15:13:48 +08:00
|
|
|
|
<button class="btn btn-success mr-2 copy-button" onclick="copyUrl(this)">COPY URL</button>
|
2024-03-26 14:49:22 +08:00
|
|
|
|
<span class="mr-2 file-name">${file.name}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="file-url">
|
|
|
|
|
|
<input type="text" class="form-control" value="${data}" readonly>
|
2024-03-26 14:43:21 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
`;
|
2024-03-26 14:53:16 +08:00
|
|
|
|
resultItem.innerHTML = resultContent;
|
2024-03-26 14:49:22 +08:00
|
|
|
|
if (enablePreview) {
|
|
|
|
|
|
const preview = document.createElement('div');
|
|
|
|
|
|
preview.className = 'preview-container';
|
|
|
|
|
|
const previewImg = document.createElement('img');
|
|
|
|
|
|
previewImg.src = data;
|
|
|
|
|
|
previewImg.className = 'preview-img';
|
|
|
|
|
|
preview.appendChild(previewImg);
|
|
|
|
|
|
resultItem.appendChild(preview);
|
|
|
|
|
|
}
|
2024-03-26 14:43:21 +08:00
|
|
|
|
resultContainer.appendChild(resultItem);
|
2024-03-26 14:53:16 +08:00
|
|
|
|
resultContainer.style.display = 'block';
|
2024-03-26 14:43:21 +08:00
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
const resultItem = document.createElement('div');
|
|
|
|
|
|
resultItem.className = 'result-item';
|
|
|
|
|
|
resultItem.innerHTML = `<input type="text" class="form-control" value="文件 ${file.name} 上传失败" readonly>`;
|
|
|
|
|
|
resultContainer.appendChild(resultItem);
|
2024-03-26 14:53:16 +08:00
|
|
|
|
resultContainer.style.display = 'block';
|
2024-03-26 14:43:21 +08:00
|
|
|
|
});
|
|
|
|
|
|
}
|
2024-03-27 15:01:34 +08:00
|
|
|
|
}
|
2024-03-26 14:43:21 +08:00
|
|
|
|
function copyUrl(button) {
|
2024-03-26 14:49:22 +08:00
|
|
|
|
const copyText = button.parentElement.nextElementSibling.querySelector('input');
|
2024-03-26 14:43:21 +08:00
|
|
|
|
copyText.select();
|
|
|
|
|
|
copyText.setSelectionRange(0, 99999);
|
|
|
|
|
|
document.execCommand('copy');
|
2024-03-26 14:32:44 +08:00
|
|
|
|
}
|
2024-03-27 15:01:34 +08:00
|
|
|
|
</script>
|
2024-03-26 14:32:44 +08:00
|
|
|
|
</body>
|
2024-03-26 14:35:42 +08:00
|
|
|
|
</html>
|
