Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Những Thư Viện Upload File Cho Trang Web

Những Thư Viện Upload File Cho Trang Web


Ngày 25 Tháng 6 Năm 2020

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu lý do tại sao lại cần những thư viện upload file cũng như những thư viện nào được lập trình sử dụng phổ biến trong việc phát triển web năm 2020. Nào bạn hãy cùng mình đi vào tìm hiểu nhé!

Chức Năng Upload File Là Gì?

Ví dụ bạn có một trang web bán hàng thì việc tải hình ảnh sản phẩm lên trên máy chủ để lưu trữ là chức năng không thể thiếu trong trang web hay các trang diễn đàn cần dùng chức năng này để có thể lấy hình ảnh thông tin từ người dùng... Nó không chỉ gói gọn trong hình ảnh mà các tệp tải lên có thể là video, pdf, word...
Tuy nhiên để viết mã cho chức năng này thì tốn rất nhiều công sức và thời gian. Do đó các thư viện upload file ra đời giúp bạn dễ dàng thiết kế và phát triển chức năng này với nhiều tính năng tiện ích cộng thêm như là cho phép tải nhiều tệp cùng một lúc, hiển thị thanh tiến trình cho quá trình tải file, thêm chức năng kéo thả... Bài hôm nay chúng ta sẽ đi vào những thư viện upload file phổ biến trong năm 2020 nhé!

Các Thư Viện Upload File Javascript

Filepond là một thư viện mã nguồn mở được xây dựng bằng Javascript thuần giúp bạn có thể tải lên bất cứ thứ gì cho trang web. Ngoài ra nó còn có chức năng tối ưu hình ảnh giúp việc tải file được nhanh hơn. Nó cũng được thiết kế theo hướng hiện đại mang lại cảm giác thú vị cũng như nâng cao trải nghiệm cho người dùng khi sử dụng chức năng này. Một số điểm mạnh của thư viện này là nhận nhiều định dạng đầu vào như là tệp, thư mục, URL dữ liệu..., chức năng kéo thả tệp, điều hướng thông qua bàn phím hay là hiển thị được trên nhiều màn hình thiết bị khác nhau bằng cách chia tỷ lệ tự động dựa theo không gian có sẵn. Còn nhiều chức năng khác bạn có thể xem thêm ở trang chính của nó nhé.
Điểm mình thích của thư viện này là bạn có thể sử dụng cho các framework front-end phổ biến hiện nay như là Vue, Reat, Angular và Jquery.

Filepond

DropzoneJS là một thư viện mã nguồn mở nhỏ gọn giúp bạn xây dựng chức năng upload file bằng cách kéo thả tệp hay chọn tệp bằng cách thông thường. Ngoài ra sau khi tải xong file thì nó sẽ hiển thị hình ảnh của tệp được tải lên để người dùng biết là mình đã tải đúng file hay chưa. Nó cũng cung cấp cho bạn một số thiết lập để dễ dàng tùy chỉnh chức năng này như là xác định kích thước tối đa cho file tải lên, có cho phép tải nhiều file lên cùng một lúc hay không, điều chỉnh hình ảnh hiển thị sau khi file được tải lên... Cái này bạn thêm khảo thêm trong phần Configuration của trang nó nhé.

DropzoneJS

Uppy là một thư viện mã nguồn mở giúp bạn dễ dàng tải file lên cho máy chủ từ máy tính hay thông qua các trang web lưu trữ như là Google Driver, Dropbox, OneDrive, Instagramn... Với các tính năng hữu ích khác như là kích thước nhỏ gọn, được chia thành nhiều mô đun để bạn có thể loại bỏ những chức năng không sử dụng, có thể khôi phục tệp nếu gặp sự cố thông qua Golden Retriever, có hỗ trợ nhiều ngôn ngữ (Có Việt Nam nhé)... Bạn có thể xem các hướng dẫn thiết lập sử dụng trong phần Document hay các bài viêt cập nhật tính năng cho từng phiên bản ở trong Blog nhé.

Uppy

jQuery File Upload là một thư viện xây dựng Jquery giúp bạn có thể tải tệp lên cho trang web với nhiều tính năng tích hợp như là lựa chọn tải nhiều tệp cùng một lúc, kéo thả tệp, xác thực và xem trước hình ảnh hiển thị. Nó hoạt động tốt với mọi nên tảng từ phía máy chủ như là NodeJS, Java, PHP, Python... Ngoài ra bạn có xác định thêm một số thuộc tính như là lựa chọn loại file được phép tải lên, giới hạn kích thước file, thêm tiêu đề và chú thích...

jQuery File Upload

Uppload là một thư viện mã nguồn mở giúp bạn tạo chức năng upload hình ảnh một cách dễ dàng và nhanh chóng cho trang web. Với khả năng tùy biến cao thông qua việc cung cấp hơn 30 plugin hỗ trợ. Một sổ điểm mạnh của nó là chức năng kéo thả, lấy hình ảnh từ các dịch vụ web, có thể chỉnh sửa hình ảnh trược khi tải lên, hoạt động trên hầu hết các trình duyệt hiện nay, hỗ trợ cho các front-end framework phổ biến như là Vue, React...

Uppload

FineUploader là một thư viện xây dựng bằng Javascript giúp bạn có thể xây dựng chức năng upload file cho hầu hết các định dạng tệp và chạy được nhiều nền tảng khác nhau bên phía máy chủ. Ngoài ra nó còn có một số tính năng hữu ích như là dễ dàng chỉnh sửa, thiết lập style cho thanh tiến trình, chức năng kéo và thả, tự động tải lại khi có sự cố về mạng, tải trực tiếp lên các dịch vụ đám mây như Amazone S3, Microsoft Azure..., xem trước hình ảnh hiển thị, giới hạn số lượng file được phép tải lên...

FineUploader

Resumable.js là một thư viện Javascript cho phép bạn tạo chức năng tải nhiều file cùng một lúc thông qua HTML5 File API. Nó được thiết kế để chịu tải các file có kích thước lớn thông qua HTTP bằng cách chia tệp ra thành từng file nhỏ và nếu có lỗi thì nó sẽ tự động thực hiện lại quá trình tải file. Và nó hỗ trợ hai trình duyệt chính là Firefox 4+ and Chrome 11+. Phần hướng dẫn và thiết lập bạn có thể tham khảo trong trang demo của nó nhé!

Resumable.js

jQuery Ajax File Uploader Widget là một thư viện mã nguồn mở được xây dựng bằng Jquery giúp bạn dễ dàng xây dựng chức năng upload file thông qua việc sử dụng AJAX. Với kích thước nhỏ gọn chỉ khoảng 8kb, cho phép thiết lập các điều chỉnh bắt đầu hay dừng quá trình tải file, thêm ghi chú vào cho công cụ, hiển thị hình ảnh xem trước... thì mình nghĩ đây là một thư viện tốt để xây dựng chức năng tải file cho trang web. Nó cũng có đầy đủ ví dụ về các tính năng, bạn có thể tham khảo trong trang demo nhé!

jQuery Ajax File Uploader Widget

Bootstrap-fileinput là một thư viện mã nguồn mở được xây dựng cho Bootstrap 3 và Bootstrap 4. Nó giúp chúng ta có thể tạo chức năng upload file cho trang web với nhiều tính năng bổ sung như là hiển thị thông tin file, cho phép thêm sửa xóa khi upload nhiều tệp, hiển thị thanh tiến trình trong quá trình tải file, chức năng kéo thả cho các phần tử... Ngoài hình ảnh thì bạn có thể tải nhiều định dạng khác như video, audio, chữ... Theo mình thấy đây là một thư viện dễ dàng cài đặt và thiết kế đẹp mắt với những bạn yêu thích sử dụng Bootstrap.

Bootstrap-fileinput

Simple Ajax Uploader là thư viện giúp bạn tạo một chức năng upload cho trang web một cách nhanh chóng và dễ dàng. Mặc dù thiết kế đơn giản và kích thước nhỏ nhưng nó vẫn đảm bảo cung cấp đầy đủ các tính năng cho người dùng. Nó có một số điểm mạnh là hỗ trợ tải nhiều tệp cùng một lúc, chức năng kéo thả, hiển thị thanh tiến trình trong quá trình tải file, hỗ trợ các trình duyệt phổ biến và đối với IE là từ phiên bản IE7+ trở lên.

Simple Ajax Uploader

Tus-js-client là một thư viện javascript giúp bạn tạo chức năng upload file cho trang web thông qua giao thức HTTP. Điểm mạnh của nó là khi gặp sự cố làm gián đoạn trong quá trình tải lên thì nó sẽ tự động thực thi lại mà không cần phải tải lại dữ liệu trước đó. Ngoài chạy được trên các trình duyệt phổ biến hiện nay thì nó còn được dùng trên Node.js, React Native và Apache Cordova.

Tus-js-client

PekeUpload là một plugin Jquery cho phép bạn dễ dàng tạo chức năng upload file cho trang HTML5. Với thiết kế đơn giản, nhỏ gọn nhưng vẫn cung cấp nhiều tính năng để tinh chỉnh chương trình phù hợp cho trang web như là giới hạn kích thước tệp, tùy chỉnh nội dung thông báo, hiển thị thanh tiến trình, hỗ trợ chức năng kéo và thả, hiển thị trước hình ảnh kết quả...

PekeUpload

File-upload-with-preview là một thư viện mã nguồn mở nhỏ gọn giúp bạn dễ dạng tạo chức năng upload file cho hình ảnh . Như tên của nó thì chức năng này sẽ cho chúng ta xem trước các kết quả hiển thị để xác minh. Với việc viết bằng javascript thuần, không sử dụng thêm thư viện bổ sung và kích thước chỉ khoảng 13.55kb sau khi nén thì thư viện này sẽ giúp bạn tối ưu mạnh mẽ hiệu suất cho trang web cũng như có thể áp dụng cho nhiều loại dự án web khác nhau.

File-upload-with-preview

Một số thư viện khác

Phần này mình sẻ để hình ảnh minh họa và nguồn thư viện thôi nhé!

Flow.js

Flow.js

Plupload

Plupload

HTML5 Drag & Drop Ajax File Uploader

HTML5 Drag & Drop Ajax File Uploader

FileAPI

FileAPI

simpleUpload.js

simpleUpload.js

FileDrop

FileDrop

Formstone

Formstone

Nếu bạn muốn tìm hiểu thêm các ví dụ về chức năng upload file cho trang web thì có thể xem ở đây nhé

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thư viện upload file hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!