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