Plugin tải lên tệp ES5 / ES6 miễn phí - Uppy

Một trong những hình thức đầu vào khó nhất để thiết kế là tải lên tập tin. Nó có kiểu HTML mặc định, nhưng nó không phải là thứ đẹp nhất trên thế giới.

Uppy đưa tập tin tải lên một cấp độ hoàn toàn mới với một giao diện tùy chỉnh và một quy trình tải kiểu Ajax động.

Nó chạy trên mã ES5 / ES6, để bạn có thể xây dựng các ứng dụng web của mình với các tiêu chuẩn JavaScript mới nhất. Và, nó thậm chí hỗ trợ tải tệp lên từ các trang lưu trữ đám mây chẳng hạn như Dropbox hoặc Google Drive, vì vậy đó là một tập lệnh tải lên nhiều mặt cho web.

Uppy là hoàn toàn miễn phí và nguồn mở, với một repo trên GitHub. Tuy nhiên, cách dễ nhất để cài đặt plugin này là thông qua npm hoặc Sợi, vì vậy bạn có thể chạy nó như một gói thực sự.

Khi bạn nhận được các tệp được thêm vào trang web của mình, bạn chỉ cần bao gồm tệp Uppy.js và mã CSS. Sau đó, bạn nhắm mục tiêu bất kỳ trường đầu vào nào bạn muốn và Uppy chăm sóc phần còn lại.

Nó có một giao diện độc đáo trông giống như một vị trí vuông lớn để kéo và thả tập tin. Bạn cũng có thể chọn các mục từ ổ cứng của bạn hoặc thậm chí tải tệp từ xa từ các URL bên ngoài. Khá điên!

Bạn có thể tìm thấy toàn bộ quá trình thiết lập trên trang tài liệu, nhưng nó không yêu cầu ít nhất một số hiểu biết về ECMAScript 6. Thư viện này hướng tới tương lai của kịch bản và không phải là thứ dễ sử dụng nhất với JavaScript vanilla thuần túy.

Nhưng, nếu bạn nghiêm túc về phát triển web thì dù sao cũng nên học ES6. Bạn có thể tìm tấn tài nguyên trực tuyến để tự học và bạn thậm chí có thể sử dụng Uppy như là lần đầu tiên của bạn “thực” dự án để lặn và bắt đầu học.

Kiểm tra ví dụ về Bảng điều khiển để thấy Uppy trong hành động. Đối với trang này, tải lên được ẩn đằng sau một nút kích hoạt, nơi bạn nhấp vào nút để hiển thị trường tải lên theo phương thức.

Từ đó, bạn có thể chọn xem bạn có muốn tải lên một hình ảnh từ máy tính của bạn, từ web hoặc thậm chí từ webcam của bạn!

Trang ví dụ cung cấp một bó để xem qua, bao gồm một ví dụ kéo và thả, cùng với một trang demo quốc tế.

Nhưng, để thực sự tìm hiểu cách thức hoạt động của nó, tôi khuyên bạn nên lướt qua các tài liệu và duyệt qua repo GitHub chính. Bạn cũng có thể chia sẻ suy nghĩ của mình với những người sáng tạo trên Twitter @transloadit.