9 mã nguồn mở cho file upload field

Bạn có thể dễ dàng tìm được các công cụ hữu ích giúp cải thiện web forms, từ các bộ UI kits đến các plugins jQuery nâng cao.

Tuy nhiên, một trong những trường input khó chỉnh sửa nhất là trường upload. Nó là một phần input mặc định của HTML và cho phép người dùng upload tệp lên từ máy tính cá nhân. Việc thiết kế lại trường upload là một thử thách “nặng đô” so với việc thay đổi các yếu tố khác.

Nếu bạn đang mong muốn điều chỉnh các trường upload của mình, thì các thư viện dưới đây có thể giúp bạn. Tôi đã tổng hợp 9 trường upload code tay từ CodePen để chứng minh rằng bạn có thể tái thiết kế trường này theo các bạn muốn.

1. Flat File Upload

Wallace Erick đã tạo nên trường upload này bằng CSS và JavaScript. Nó được thiết kế dựa theo xu hướng thiết kế phẳng (flat design), tránh sử dụng các màu gradient bằng cách chỉ tập trung vào một màu – thường thông qua một cơ chế tông màu đơn sắc.

Bạn có thể thêm upload file này vào bất cứ trang nào và vẫn trông rất phù hợp. Tất cả những gì bạn cần làm đó là thay đổi cơ chế màu và vị trí của nó cho phù hợp với form của mình.

Nó sẽ hoạt động đúng như những gì bạn mong đợi và vì nó chạy trên input HTML chuẩn nên nó còn có thể chạy trên các trình duyệt cũ hơn và hoạt động trên mobile nữa.

2. Custom File Upload

Đây là một thiết kế phức tạp hơn đối với trường upload. Aaron Vanston đã tạo nên tính năng upload file này như một bản sao mà bạn thường thấy trên các website lớn.

Hãy nghĩ về các website công nghệ lớn như Dropbox, Google+ và Facebook. Thường có một vùng kéo & thả file đi kèm với dòng chữ “click here” lớn để mở cửa sổ upload. Đó chính xác là những gì Aaron làm với đoạn snippet này.

Nó dựa trên jQuery và một chút JS/CSS để hoạt động. Và dù cho nó có sử dụng trường input chuẩn HTML, nó vẫn còn có thể xử lý quá trình upload bằng các chức năng tự chọn của JS.

Nếu bạn thông thạo JavaScript, nó có thể hoạt động như một template hữu ích giúp bạn xây dựng UI cho trường file upload của riêng mình.

3. Responsive Animated Uploader

Nếu bạn đang dành thời gian phát triển bất kì thiết kế web nào, bạn sẽ biết rõ rằng bạn phải làm theo xu hướng responsive (có tính tương thích cao). Người dùng mobile có thể upload tệp lên web thông qua các form như thế, vì vậy việc tận dụng responsive trường input là một ý rất hay.

Bạn có thể tham khảo thiết kế này như một mẫu trường upload chất lượng có tương thích với mobile. Nó trông rất căn bản, bao gồm một ô upload nhỏ kèm tính năng kéo – thả.

Lưu ý rằng thiết kế này không sử dụng yếu tố input – vì thế việc nhấn chọn upload là không thể. Tôi cho rằng đây là một cơn ác mộng về tính năng – nhưng nó chỉ là một bản mẫu giúp cho việc kiểm thử – vì thế nó không thể đáp ứng nhu cầu khả dụng hoàn hảo được.

Nếu bạn đem dòng lệnh này vào trang của mình, bạn nên thêm một trường upload thông thường vào bên cạnh vùng kéo & thả.

4. Custom Uploader

Lập trình các project mỗi ngày là một phương pháp phát triển kĩ năng tuyệt vời cho bạn. Drew Vosburg đã áp dụng phương pháp này để dựng nên một upload form đơn giản và miễn phí trên CodePen.

Nó được tùy chỉnh chủ yếu dựa trên các tính năng của JavaScript mà được sử dụng để xử lý hiệu ứng kéo – thả. Nhưng thực chất trường input này được xây dựng để hỗ trợ cả hai tính năng chạm & nhấn, bên cạnh chức năng kéo & thả.

Vùng chọn được là vùng được dán label HTML và style với CSS. Thành phần label này đính kèm vào trường input, cái được dấu đi khỏi trang. Nó hoạt động như một trường có thể click chọn được. Đây là một ý tưởng rất thông minh và hợp lí để áp dụng.

5. Stock Photo Upload Interface 

Đây là một trong những snippet phức tạp nhất, và cũng ấn tượng nhất mà tôi thấy được trên CodePen. Nó cho phép bạn upload ảnh vào thư viện trực tiếp từ máy tính của bạn. Với mỗi bức ảnh mà bạn upload lên, nó sẽ hiển thị bản preview ngay trên trang.

Nó hoạt động bằng cách lấy ảnh bằng JavaScript, sau đó chuyển nó thành base64 để nhúng vào CSS.

Bất cứ khi nào bạn upload ảnh lên server, chúng sẽ tự động tạo nên một file tạm thời. Trên máy chủ của riêng bạn, bạn có thể sử dụng tệp này để hiển thị hình ảnh. Nhưng giờ đây khi CSS hỗ trợ base64, đây chỉ còn là một phương pháp thay thế.

Giao diện này vô cùng gọn gàng và có tính năng upload xen giữa trong đó.

6. Simple Blue Upload UI

Nếu bạn đang tìm kiếm một trường upload không theo JS thì có thể tham khảo mẫu sau, được xây dựng bởi Stephen Baker.

Nó sử dụng CSS3 thuần để đổi cách thức input gói gọn trong một nút lớn. Nó hoạt động bởi một icon upload của Font Awesome và được bọc tròn lại quanh trường upload.

Bạn có thể thay đổi style, màu, icon hay bất cứ yếu tố nào khác để làm nó phù hợp với site của mình. Về căn bản, đây là một phương án cực gọn nhẹ cho thiết kế input mặc định và nó chạy được trên CSS3 thuần.

7. jQuery Custom File Upload Input

Nhà phát triển Terry Young đã dùng một ít jQuery để nâng cấp một số trường upload có sẵn. Dưới đây là kết quả (và tôi có thể nói, đó là một kết quả hết sức đột phá).

Qua các style này bạn có thể thay đổi chữ, kích cỡ, màu của nút hoặc bỏ chữ trong trường upload để chỉ dùng một nút.

Hãy lưu ý rằng cách này đòi hỏi một lượng jQuery đủ tốt vì hầu hết các tính năng không thể chỉnh sửa bằng CSS. Nếu bạn không phiền làm việc với jQuery, thì lựa chọn này sẽ đem đến kết quả phi thường.

8. Flat UI Input File

Đây là một trường upload khá khác biệt được xây dựng bởi Geoffrey Crofte. Nó cũng dựa trên JavaScript, nhưng thiết kế toàn bộ phần input bằng CSS3.

Vì đây chỉ là một bản snippet mẫu, sẽ không có chỗ để bạn upload tệp. Tuy nhiên, nó đủ đơn giản để chỉnh sửa nếu bạn thêm nó vào site của mình. Phần thiết kế và cài đặt chính sẽ mang sức sống đến cho đoạn snippet này.

Chức năng return chạy trên JavaScript, nên đó cũng là nơi bạn xử lý các tệp được upload, những thay đổi hiển thị hay bất cứ cái gì khác.

Điểm tuyệt vời nhất là, các đoạn mã này có thể hoạt động trên các trình duyệt từ thời của IE 8! Vì thế đây là một sự lựa chọn hoàn hảo nếu bạn trăn trở về khả năng truy cập.

9. Multi-trường uploads

Đây là trường tùy chỉnh cuối cùng với một điểm khác biệt: về mặt thẩm mỹ nó có thể trông khá đơn giản – nhưng điểm sáng thực sự nằm ở phần tính năng.

Trường upload này được thiết kế để hỗ trợ nhiều tệp một lúc. Bạn sẽ không hay thấy field này đi với trường input – hoặc ít nhất là không phải mặc định. Người dùng phải chọn nhiều tệp trong cùng một cửa sổ và phần backend phải hỗ trợ việc đó.

Với snippet này, bạn có thể liệt kê tất cả các tên tệp vào một trường upload. Thậm chí bạn có thể dùng JavaScript để chèn thêm các tên tệp đó đâu đó trên trang chính.

Và dù cho trên đây là một số những snippet ưa thích của tôi, chúng chắc chắn không phải là duy nhất. Bạn có thể dạo một vòng tại CodePen để xem bạn có thể tìm thấy những gì khác nữa nhé.

Nguồn: Speckyboy.com