Để tạo một trang web hoàn chỉnh cho phép người dùng tải lên hình ảnh lên Imgur bằng cách sử dụng XMLHttpRequest, chúng ta sẽ làm theo các bước sau. Dưới đây là ví dụ mã code HTML, CSS và JavaScript để tạo trang này.
Các Tính Năng:
Chúng ta sẽ tạo một trang web với giao diện đơn giản gồm:
Tải Hình Ảnh Lên Imgur: Người dùng có thể chọn một hình ảnh và nhấn nút để tải lên.
Hiển Thị Kết Quả: Sau khi tải lên, URL của hình ảnh sẽ được hiển thị và người dùng có thể xem ngay.
Thông Báo Thành Công/Lỗi: Thông báo sẽ được hiển thị tùy thuộc vào kết quả tải lên.
Các bước thực hiện
Bước 1: Chuẩn Bị Client ID của Imgur
Trước khi bắt đầu, bạn cần có Client ID từ Imgur. Bạn có thể lấy Client ID theo các bước sau:
Bước 2: Tạo Tệp index.html
Tệp HTML chứa cấu trúc trang. Cung cấp giao diện đơn giản với một trường nhập liệu để chọn ảnh và một nút để tải ảnh lên. Có thêm các phần tử để hiển thị thông báo và ảnh đã tải lên.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tải Hình Ảnh Lên Imgur</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Tải Hình Ảnh Lên Imgur</h1>
<input type="file" id="fileInput" accept="image/*">
<button id="uploadBtn">Tải Lên Imgur</button>
<div id="statusMessage"></div>
<div id="imagePreview" class="hidden">
<h3>Hình Ảnh đã Tải Lên:</h3>
<img id="uploadedImage" src="" alt="Hình ảnh tải lên">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Bước 3: Tạo Tệp style.css
Tệp CSS để tạo kiểu cho giao diện:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 400px;
}
h1 {
color: #333;
}
input[type="file"] {
margin: 20px 0;
padding: 10px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
#statusMessage {
margin-top: 20px;
font-size: 18px;
}
.hidden {
display: none;
}
#imagePreview img {
max-width: 100%;
margin-top: 20px;
border-radius: 8px;
}
Bước 4: Tạo Tệp script.js
Tệp JavaScript để xử lý tải ảnh lên Imgur. Sử dụng XMLHttpRequest để gửi ảnh lên Imgur.
// Thay thế bằng Client ID của bạn
const clientId = 'YOUR_IMGUR_CLIENT_ID'; // Thay bằng Client ID của bạn
document.getElementById('uploadBtn').addEventListener('click', function() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
uploadImageToImgur(file);
} else {
showStatusMessage('Vui lòng chọn một tệp hình ảnh!', 'error');
}
});
function uploadImageToImgur(imageFile) {
const url = 'https://api.imgur.com/3/image'; // URL API Imgur
// Tạo FormData để gửi ảnh
const formData = new FormData();
formData.append('image', imageFile); // Thêm hình ảnh vào FormData
// Tạo XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
// Thêm header với Client ID
xhr.setRequestHeader('Authorization', 'Client-ID ' + clientId);
// Xử lý khi tải lên thành công
xhr.onload = function () {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (response.success) {
const imageUrl = response.data.link;
showStatusMessage('Hình ảnh đã được tải lên thành công!', 'success');
showImagePreview(imageUrl);
} else {
showStatusMessage('Lỗi tải hình ảnh lên Imgur: ' + response.data.error, 'error');
}
} else {
showStatusMessage('Lỗi HTTP: ' + xhr.status, 'error');
}
};
// Xử lý lỗi khi không thể kết nối
xhr.onerror = function () {
showStatusMessage('Có lỗi khi kết nối đến Imgur', 'error');
};
// Gửi yêu cầu
xhr.send(formData);
}
function showStatusMessage(message, type) {
const statusMessageElement = document.getElementById('statusMessage');
statusMessageElement.textContent = message;
statusMessageElement.style.color = type === 'success' ? 'green' : 'red';
}
function showImagePreview(imageUrl) {
const imagePreview = document.getElementById('imagePreview');
const uploadedImage = document.getElementById('uploadedImage');
uploadedImage.src = imageUrl;
imagePreview.classList.remove('hidden');
}
Hướng Dẫn Sử Dụng:
Lấy Client ID: Đăng ký ứng dụng trên Imgur và lấy Client ID.
Cập Nhật Client ID: Thay thế giá trị 'YOUR_IMGUR_CLIENT_ID' trong script.js bằng Client ID của bạn.
Tải Tệp Tin: Tạo ba tệp index.html, style.css và script.js trong cùng một thư mục.
Mở Trình Duyệt: Mở index.html trong trình duyệt của bạn và thử tải lên hình ảnh.
Hy vọng rằng hướng dẫn này giúp bạn tạo ra một trang web đầy đủ chức năng để tải ảnh lên Imgur! Nếu có câu hỏi nào, đừng ngần ngại hỏi nhé!
