Hướng dẫn css upload file
Khả năng Upload file là một tính năng được yêu cầu cho một số trang web và ứng dụng phổ biến hiện nay. Từ việc Upload hình ảnh trên mảng xã hội cho avatar hay resume, lưu các file .pdf, .docx. Hầu như đã xuất hiện ở mọi nơi. Show Là một lập trình viên web, chúng ta nên biết HTML hỗ trợ tính năng này cùng với một chút JavaScript để xử lý. Với HTML5, thì tính năng Upload File
(File API) đã thêm vào Single File UploadThông thường, chúng ta chỉ cần điền
Khi bật trạng thái upload file trên thẻ input với Khi tải lên thành công, Đầu tiên, truy vấn đối tượng thông qua
Sau đó, thêm sự kiện
Chú ý, Mảng FileList với đối tượng File có tất cả thông tin (metadata) về file được tải lên. Multiple Files UploadChúng ta có thể tải nhiều tệp cùng lúc. Để
làm điều đó, chúng ta cần thêm một thuộc tính vào thẻ input là
Bây giờ, Browser sẽ cho bạn tải 1 hoặc hiều files cùng lúc. Giống như ví dụ trước, chúng ta có vẫn sử dụng sự kiện Tìm hiểu về metadata fileBất cứ khi nào chúng ta đăng tải tập tin, đối tượng file đều có metadata chứ thông tin giống như name, size ,last update time, type, etc. Đây là những thông tin hữu ích để bạn kiểm soát và cần thiết có thể hiển thị cho người dùng.
Tìm hiểu về thuộc tính accept trên fileChúng ta có thẻ sử dụng
thuộc tính accept trên input thuộc type=file để giới hạn, cho phép hoặc từ chối các loại tập tin đăng tải từ phía người dùng. Có thể bạn chỉ muốn cho phép người dùng tải tệp hình ảnh thuộc định dạng
Quản lý nội dung của tập tin fileBạn có thể sẽ muốn hiển thị nội dung hình ảnh vừa đăng tải với mục đích muốn người dùng, người sử dụng biết rõ họ vừa đăng tải đối tượng gì lên. Chúng ta có thể sử dụng
FileReader để chuyển đổi tập tin file sang dạng chuỗi binary. Chúng ta sẽ sử dụng sự kiện
Kiểm soát kích cỡ tập tin (tệp) đăng tảiNhư chúng ta đã thấy, có thể đọc được thông tin của tập tin thông qua metadata của chúng. Như vậy, chúng ta có cơ sỡ để kiểm soát, cho phép hoặc từ chối tập tin được đăng tải từ phía máy khách, điều này cũng giúp bạn giảm tải trọng cho Server.
Hiển thị quá trình đăng tải tệpThông thường khi sử dụng, chúng ta sẽ cần hiển thị thông tin về quá trình đăng tải tệp, để người sử dụng nắm rõ. Chúng ta sẽ sử dụng FileReader() như lần trước để kiểm soát quá trình này.
Ngoài sự kiện
Upload directoryNgoài việc đăng tải tập tin, bạn cũng có quyền đăng tải cả thư mục. Wellll, nó rất khả thi nhưng có một số giới hạn, có thể với hiện tại điều này không còn đáng kể.
Rất dễ dàng để sử dụng tính năng này, như bên dưới chỉ cần thêm thuộc tính webkitdirectory
Xử lý đường dẫn file uploadThông thường khi bạn đăng tải tệp và lấy đường dẫn hình ảnh sẽ có dạng data:image/base64 vô cùng dài. Bạn có thể xử lý đường dẫn ngắn gọn bằng cách sử dụng URL.createObjectURL() để tạo ra đường dẫn unique cho tập tin được đăng tải. Bạn cũng có thể loại bỏ nó bằng phương thức URL.revokeObjectURL() Rất đơn giản, chúng ta chỉ cần lấy thông tin tệp vừa đọc và đặt vào bên trong createObjectURL(here)
Phía trên là các trường hợp thường gặp trong quá trình xử lý tập tin được đăng tải từ máy khách. Có thể nó sẽ giúp ích cho bạn trong thời gian tới. Có thể bạn sẽ cần
|