Dưới đây là một ví dụ cơ bản về trang HTML sử dụng một biểu mẫu để tải lên ảnh và lưu đường dẫn ảnh. Trong ví dụ này, tôi sử dụng ngôn ngữ lập trình JavaScript để xử lý sự kiện tải lên và lưu đường dẫn ảnh.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Ảnh</title>
</head> <body>
<h2>Upload Ảnh</h2>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="imageInput" name="image" accept="image/*" />
<button type="button" onclick="uploadImage()">Tải lên</button>
</form>
<p id="status"></p>
<p id="imagePath"></p>
<script> function uploadImage() {
var input = document.getElementById('imageInput');
var file = input.files[0];
if (file) {
var formData = new FormData();
formData.append('image', file);
fetch('/upload', { method: 'POST', body: formData })
.then(response => response.json())
.then(data => { document.getElementById('status').innerText = data.message;
if (data.success) {
document.getElementById('imagePath').innerText = 'Đường dẫn ảnh: ' + data.path; } })
.catch(error => { console.error('Error:', error);
document.getElementById('status').innerText = 'Đã có lỗi xảy ra.'; });
}
else { document.getElementById('status').innerText = 'Vui lòng chọn một file ảnh.';
}
}
</script>
</body>
</html>Vui lòng lưu ý rằng đoạn mã trên giả định rằng bạn có một máy chủ đang lắng nghe các yêu cầu POST tới đường dẫn ‘/upload’ và xử lý việc lưu trữ ảnh. Bạn cần điều chỉnh mã nguồn phía máy chủ của mình để xử lý yêu cầu tải lên ảnh.