提交表单代码：
<form action="#" method="POST" enctype="multipart/form-data" id="upload-form"> <label for="file">选择一个图像文件：</label> <input type="file" id="file" name="file" accept="image/*"><br> <input type="submit" value="上传"> <div class="status" id="status"></div> </form>
JavaScript提交代码:
<script>
const form = document.getElementById('upload-form');
const status = document.getElementById('status');
form.addEventListener('submit', event => {
event.preventDefault();
status.style.display = 'none';
const fileInput = document.getElementById('file');
const file = fileInput.files[0];
if (!file) {
showError('Please choose a file to upload.');
return;
}
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
try {
const responseJson = JSON.parse(xhr.responseText);
const url = responseJson.url;
if (url) {
showSuccess(`图片网址 ${url}`);
} else {
showError('Failed to upload the image.');
}
} catch (error) {
showError('Failed to parse the response from the server.');
}
} else if (this.readyState === XMLHttpRequest.DONE) {
showError(`Server returned status code ${xhr.status}.`);
}
};
xhr.open('POST', 'https://api.suyanw.cn/huluxia/upload.php');
xhr.send(formData);
function showSuccess(message) {
status.textContent = message;
status.classList.remove('error');
status.classList.add('success');
status.style.display = 'block';
}
function showError(message) {
status.textContent = message;
status.classList.remove('success');
status.classList.add('error');
status.style.display = 'block';
}
});
</script>相关专题
- PixPro开源图床网站源码 [2024-07-19]
- 分享四个无任何限制的国外图床网站 [2024-06-27]
- 分享几个基于cloudflare搭建的图床源码 [2024-06-27]
- 利用GitHub+PicGo免费搭建个人图床教程 [2024-06-24]
- 利用CloudFlare R2+PicGo免费搭建个人图床网站教程 [2024-06-24]
