Chia Sẻ Mã Nguồn

Chia Sẻ Code Tạo Trang Web Upload Hình Ảnh Lên Imgur

adminWritten by admin

Để 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:

  • Truy cập Imgur API.
  • Đăng nhập vào tài khoản Imgur.
  • Chọn “Register Your Application” và nhận Client ID.

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:

  1. Lấy Client ID: Đăng ký ứng dụng trên Imgur và lấy Client ID.
  2. 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.
  3. 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.
  4. 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é!

Để lại một bình luận