mirror of
https://github.com/BlueSkyXN/WorkerJS_CloudFlare_ImageBed.git
synced 2024-11-16 03:32:26 +08:00
152 lines
6.4 KiB
HTML
152 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>文件上传</title>
|
|
<!-- 引入 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 {
|
|
margin-top: 10px;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-direction: column; /* 不同框之间纵向排列 */
|
|
width: 100%; /* 设置结果框宽度为100% */
|
|
}
|
|
.preview-container {
|
|
max-width: calc(100% - 20px); /* 图片预览容器的最大宽度为外部框架宽度减去左右 padding */
|
|
max-height: calc(8 * 50px); /* 最大高度不超过8个上传按钮的高度 */
|
|
overflow: hidden; /* 超出部分隐藏 */
|
|
margin-top: 10px; /* 添加顶部间距 */
|
|
width: 100%; /* 设置预览容器宽度为100% */
|
|
}
|
|
.preview-img {
|
|
max-width: 100%; /* 图片预览的最大宽度为容器宽度 */
|
|
height: auto; /* 自适应高度 */
|
|
display: block; /* 防止图片下面产生空白 */
|
|
}
|
|
.copy-button, .file-name, .file-url {
|
|
display: inline-block; /* 按钮、文件名和URL在同一行 */
|
|
margin-bottom: 5px; /* 添加底部间距 */
|
|
}
|
|
.copy-button {
|
|
width: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2>文件上传</h2>
|
|
<form id="upload-form">
|
|
<div class="form-group">
|
|
<label for="apiUrl">API 域名：</label>
|
|
<input type="text" class="form-control" id="apiUrl" placeholder="输入 API 域名" value="{{API_ENDPOINT}}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="fileInput">选择文件</label>
|
|
<input type="file" class="form-control-file" id="fileInput" multiple required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="apiSelect">选择接口</label>
|
|
<select class="form-control" id="apiSelect">
|
|
<option value="58img">api-58img</option>
|
|
<option value="tgphimg">api-tgph-official</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="enablePreview">
|
|
<label class="form-check-label" for="enablePreview">
|
|
启用预览
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">上传</button>
|
|
</form>
|
|
<div id="result" class="mt-3">
|
|
<!-- 上传结果将显示在这里 -->
|
|
</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>
|
|
document.getElementById('upload-form').addEventListener('submit', function(e) {
|
|
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 = '';
|
|
resultContainer.style.display = 'none';
|
|
|
|
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';
|
|
const resultContent = `
|
|
<div>
|
|
<button class="btn btn-success mr-2 copy-button" onclick="copyUrl(this)">复制URL</button>
|
|
<span class="mr-2 file-name">${file.name}</span>
|
|
</div>
|
|
<div class="file-url">
|
|
<input type="text" class="form-control" value="${data}" readonly>
|
|
</div>
|
|
`;
|
|
resultItem.innerHTML = resultContent;
|
|
|
|
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);
|
|
}
|
|
|
|
resultContainer.appendChild(resultItem);
|
|
resultContainer.style.display = 'block';
|
|
})
|
|
.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);
|
|
resultContainer.style.display = 'block';
|
|
});
|
|
}
|
|
});
|
|
|
|
function copyUrl(button) {
|
|
const copyText = button.parentElement.nextElementSibling.querySelector('input');
|
|
copyText.select();
|
|
copyText.setSelectionRange(0, 99999);
|
|
document.execCommand('copy');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|