Share Hướng dẫn upload tập tin bằng ajax đơn giản với thư viện UIkit

[filiallion]

Language

Tiếng Việt

Upload tập tin là một phần không thể thiếu trên các website cho phép người dùng đăng bài viết hay sản phẩm và gần như chắc chắn chức năng quản trị website cũng phải có để cập nhật hình ảnh, video. Với cách thức thông thường, các bạn sẽ upload tập tin từ form với input file và người dùng phải đợi cho website tải lại trang mỗi lần upload. Hiện nay, cách thức upload tập tin như thế này không còn được sử dụng phổ biến mà thay vào đó các website thường có xu hướng upload tập tin bằng kỹ thuật ajax. Ưu điểm của cách thức upload tập tin bằng ajax đó là tạo cảm giác thân thiện với người dùng, không phải tải lại trang sau mỗi lần upload cũng như xử lý thêm được nhiều vấn đề liên quan khác.

Hiện tại, các bạn có thể sử dụng thư viện jQuery để upload tập tin bằng ajax hoặc sử dụng các thư viện khác. Bài viết này tôi sẽ giới thiệu với các bạn một thư viện rất dễ sử dụng với nhiều tính năng cao cấp, đó là thành phần upload của thư viện UIkit.

Để sử dụng thành phần upload của UIkit, các bạn cần tải bộ thư viện UIkit tại địa chỉ https://github.com/uikit/uikit và tích hợp vào website với nội dung mã lệnh HTML như sau:

<link href="path/to/uikit.min.css" rel="stylesheet">
<script src="path/to/uikit.min.js"></script>

Các bạn tạo thành phần upload trên website như ví dụ sau:

<div class="uikit-upload" uk-form-custom>
    <input type="file">
    <button type="button" class="uk-button uk-button-default" tabindex="-1">Choose file</button>
</div>

Bây giờ, các bạn khai báo JavaScript để upload tập tin như ví dụ sau:

UIkit.upload(
    '.uikit-upload',
    {
        url: 'path/to/upload.php',
        completeAll: function() {
            alert('Upload completed');
        }
    }
);

Các bạn có thể tìm hiểu thêm các tuỳ chọn khác của thành phần upload trong bộ thư viện UIkit tại địa chỉ https://getuikit.com/docs/upload.