Austin/WorkerJS_CloudFlare_ImageBed
1
0
Fork 0
mirror of https://github.com/BlueSkyXN/WorkerJS_CloudFlare_ImageBed.git synced 2024-11-16 03:32:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

20240326-1440

Browse Source
This commit is contained in:
BlueSkyXN 2024-03-26 14:40:12 +08:00
parent 1e00692175
commit 032ecd5eef
1 changed files with 57 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
cloudflare-page/OneAPI-imgbed-MIX.html
View File

@ -16,18 +16,16 @@
padding: 10px;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.copy-button {
width: 70%;
margin-bottom: 10px;
}
.preview-img {
max-width: 400%;
max-height: 400%;
max-height: calc(8 * 50px); /* 最大高度不超过8个上传按钮的高度 */
max-width: 100%; /* 横向不超过外部框架的大小 */
margin-top: 10px;
}
.copy-button {
width: auto;
}
</style>
</head>
<body>
@ -68,66 +66,66 @@
<script>
document.getElementById('upload-form').addEventListener('submit', function(e) {
e.preventDefault();
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;
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';
// 清除旧的结果
resultContainer.innerHTML = '';
resultContainer.style.display = 'none';
for (const file of fileInput.files) {
const formData = new FormData();
formData.append('image', file);
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);
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';
resultItem.innerHTML = `
<button class="btn btn-success mr-2 copy-button" onclick="copyUrl(this)">复制URL</button>
<span class="mr-2">${file.name}</span>
<input type="text" class="form-control" value="${data}" readonly>
`;
fetch(apiUrl, {
method: 'POST',
body: formData,
})
.then(response => response.text())
.then(data => {
const resultItem = document.createElement('div');
resultItem.className = 'result-item';
resultItem.innerHTML = `
<button class="btn btn-success mr-2 copy-button" onclick="copyUrl(this)">复制URL</button>
<span class="mr-2">${file.name}</span>
<input type="text" class="form-control" value="${data}" readonly>
`;
if (enablePreview) {
const preview = document.createElement('img');
preview.src = data;
preview.className = 'preview-img';
resultItem.appendChild(preview);
}
if (enablePreview) {
const preview = document.createElement('img');
preview.src = data;
preview.className = 'preview-img';
resultItem.appendChild(preview);
}
resultContainer.appendChild(resultItem);
resultContainer.style.display = 'flex';
})
.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 = 'flex';
});
}
});
function copyUrl(button) {
const copyText = button.nextElementSibling.nextElementSibling;
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand('copy');
resultContainer.appendChild(resultItem);
resultContainer.style.display = 'flex';
})
.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 = 'flex';
});
}
});
function copyUrl(button) {
const copyText = button.nextElementSibling.nextElementSibling;
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand('copy');
}
</script>
</body>
</html>