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>
|
|
|
|
|
|
<!--
|
|
|
|
|
|
本代码完全开源，仅供学习CloudFlare Page和Worker组件编程使用
|
|
|
|
|
|
仓库地址 https://github.com/BlueSkyXN/WorkerJS_CloudFlare_ImageBed
|
|
|
|
|
|
不提供任何免费的技术支持、指导、问题解答，请按GitHub标准用法进行issue等方式交互
|
|
|
|
|
|
请勿滥用本代码，违规使用后果自负，任何操作和后果均与本人无关
|
|
|
|
|
|
API接口均需要使用者自行解决，本人不提供任何API接口服务
|
|
|
|
|
|
不得在中国大陆地区使用本代码
|
|
|
|
|
|
-->
|
2024-03-26 14:11:18 +08:00
|
|
|
|
<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-28 14:34:03 +08:00
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
width: 100%;
|
2024-03-26 14:35:42 +08:00
|
|
|
|
}
|
2024-03-26 14:43:21 +08:00
|
|
|
|
.preview-container {
|
2024-03-28 14:34:03 +08:00
|
|
|
|
max-width: calc(100% - 20px);
|
|
|
|
|
|
max-height: calc(8 * 50px);
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
width: 100%;
|
2024-03-26 14:43:21 +08:00
|
|
|
|
}
|
|
|
|
|
|
.preview-img {
|
2024-03-28 14:34:03 +08:00
|
|
|
|
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 {
|
2024-03-28 14:34:03 +08:00
|
|
|
|
display: inline-block;
|
|
|
|
|
|
margin-bottom: 5px;
|
2024-03-26 14:49:22 +08:00
|
|
|
|
}
|
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>
|
2024-03-27 16:49:02 +08:00
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="apiPassword">API Password</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="apiPassword" placeholder="Enter API Password">
|
|
|
|
|
|
</div>
|
2024-03-26 14:11:18 +08:00
|
|
|
|
<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>
|
2024-03-28 14:34:03 +08:00
|
|
|
|
<button type="button" class="btn btn-info" onclick="window.location.href='/tools/imgproxy';">IMGProxy</button>
|
2024-03-27 15:13:48 +08:00
|
|
|
|
<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 16:49:02 +08:00
|
|
|
|
setApiPassword();
|
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 16:49:02 +08:00
|
|
|
|
function setApiPassword() {
|
|
|
|
|
|
const encodedApiPassword = '{{API_PASSWORD_BASE64}}'; // 将这里替换为您的Base64编码后的API密码
|
|
|
|
|
|
const decodedApiPassword = atob(encodedApiPassword); // 使用atob函数解码Base64字符串
|
|
|
|
|
|
document.getElementById('apiPassword').value = decodedApiPassword; // 设置解码后的密码到密码输入框
|
|
|
|
|
|
}
|
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, {
|
2024-03-27 16:49:02 +08:00
|
|
|
|
method: 'POST',
|
|
|
|
|
|
body: formData,
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Authorization': 'Bearer ' + document.getElementById('apiPassword').value // 使用密码输入框中的密码作为请求头中的密码
|
|
|
|
|
|
}
|
2024-03-26 14:43:21 +08:00
|
|
|
|
})
|
|
|
|
|
|
.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>
|
