Khả năng tải tệp lên 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ừ công việc Tải lên hình ảnh trên một mảng xã hội cho avatar hoặc sơ yếu lý lịch, lưu các tập tin. pdf,. docx. Hầu như đã xuất hiện ở mọi nơi
Là một web lập trình viên, chúng ta nên biết tính năng hỗ trợ này của HTML cùng với một chút JavaScript để xử lý. With HTML5, thì tính năng Upload File [File API] đã được thêm vào
2. Để sử dụng, chúng ta cần đọc
const fileUpload = document.querySelector["#file-upload"];
3 và Object File. Đã giải quyết nhiều vấn đề về tải lên nhiều tệp,. v. v
const fileUpload = document.querySelector["#file-upload"];
Tải lên một tệp
Thông thường, chúng ta chỉ cần điền
4 cho thẻ
const fileUpload = document.querySelector["#file-upload"];
5 trong trường hợp muốn đăng tải tệp cho ứng dụng web
const fileUpload = document.querySelector["#file-upload"];
Khi bật trạng thái tải lên tệp trên thẻ đầu vào với người dùng
6 sẽ được phép đăng tải một hoặc nhiều tệp. Mặc dù vậy, nó sẽ cho phép bạn tải lên một tập tin sử dụng hệ thống gốc của trình duyệt
const fileUpload = document.querySelector["#file-upload"];
Khi tải lên thành công,
7 cho phép bạn đọc các thông tin của Tệp dưới dạng Đối tượng thông qua JavaScript. Để xem được các thông tin từ tệp đối tượng, chúng ta cần lắng nghe chúng bằng sự kiện
const fileUpload = document.querySelector["#file-upload"];
8 của tệp tải lên
const fileUpload = document.querySelector["#file-upload"];
Đầu tiên, truy vấn thông tin đối tượng thông qua
9
const fileUpload = document.querySelector["#file-upload"];
const fileUpload = document.querySelector["#file-upload"];
Sau đó, thêm sự kiện
8 để đọc thông tin của tệp đối tượng khi quá trình tải lên hoàn tất. Chúng ta sẽ lấy thông tin của tập tin từ
const fileUpload = document.querySelector["#file-upload"];
11
const fileUpload = document.querySelector["#file-upload"];
1
const fileUpload = document.querySelector["#file-upload"];
Chú ý, Mang FileList với đối tượng Tệp có tất cả thông tin [siêu dữ liệu] về tệp được tải lên.
Tải lên nhiều tệp
Chú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ẻ đầu vào là
12
const fileUpload = document.querySelector["#file-upload"];
4
const fileUpload = document.querySelector["#file-upload"];
Bây giờ, Trình duyệt sẽ cho bạn tải xuống 1 hoặc nhiều tệp cùng lúc. Giống như ví dụ trước, chúng ta vẫn sử dụng sự kiện
8 để lắng nghe trạng thái và lấy thông tin đã đăng tải của tập tin. You have to not note,
const fileUpload = document.querySelector["#file-upload"];
3 is a array, dành cho nhiều và bạn có thể lấy thông tin tệp từ đó.
const fileUpload = document.querySelector["#file-upload"];
Tìm hiểu về tập tin siêu dữ liệu
Bất kể khi nào chúng tôi tải xuống tệp, tệp đối tượng đều có siêu dữ liệu chứ không phải thông tin giống như tên, kích thước, thời gian cập nhật lần cuối, loại, v.v. Đây là những thông tin hữu ích để bạn kiểm tra và cần thiết có thể hiển thị cho người dùng
7
const fileUpload = document.querySelector["#file-upload"];
Tìm hiểu thuộc tính chấp nhận trên tệp
Chúng ta có thẻ sử dụng thuộc tính chấp nhận thuộc tính đầu vào type=file để giới hạn, cho phép hoặc từ chối các loại tệp đă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
15,
const fileUpload = document.querySelector["#file-upload"];
16. You can't use this property
const fileUpload = document.querySelector["#file-upload"];
0
const fileUpload = document.querySelector["#file-upload"];
Quản lý nội dung của tập tin
Bạn có thể muốn hiển thị nội dung hình ảnh vừa đăng tải với mục đích người dùng muốn, người sử dụng biết 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 sang định dạng chuỗi nhị phân. Chúng ta sẽ sử dụng sự kiện
17 để lắng nghe và truy xuất chuỗi nhị phân của tệp đã đăng tải
const fileUpload = document.querySelector["#file-upload"];
- Tìm hiểu thêm về FileReader
2
const fileUpload = document.querySelector["#file-upload"];
Kiểm tra kích thước tệp [tệp] đã tải xuống
Như chúng ta đã thấy, có thể đọc được thông tin của tập tin thông qua siêu dữ liệu 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 các tập tin được tải xuống từ phía máy khách, điều này cũng giúp bạn giảm tải trọng cho Máy chủ
3
const fileUpload = document.querySelector["#file-upload"];
Shows too loading file
Thông thường khi sử dụng, chúng tôi sẽ yêu cầu hiển thị thông tin về quá trình tải tệp tệp đã đăng tải, để người sử dụng xác định tên sử dụng. Chúng ta sẽ sử dụng FileReader[] như lần trước để kiểm soát quá trình này
4
const fileUpload = document.querySelector["#file-upload"];
Ngoài sự kiện
18, để lắng nghe quy trình tải tập tin, chúng tôi sẽ sử dụng sự kiện
const fileUpload = document.querySelector["#file-upload"];
19
const fileUpload = document.querySelector["#file-upload"];
7
const fileUpload = document.querySelector["#file-upload"];
Thư mục tải lên
Ngoài việc đăng tải tập tin, bạn còn có quyền đăng tải cả thư mục. Chà, 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ể
- Tìm hiểu thêm về thuộc tính này. thư mục webkit
It's easy easy to use this features, as the side under onlycần thêm thuộc tính webkitdirectory
0
const fileUpload = document.querySelector["#file-upload"];
Xử lý đường dẫn tệp tải lên
Thông thường khi bạn tải tệp lên và lấy đường dẫn ảnh sẽ có định dạng dữ liệu. image/base64 vô cùng dài. Bạn có thể xử lý đường rút gọn bằng cách sử dụng URL. createObjectURL[] để tạo đường dẫn duy nhất cho tệp đã tải xuống. Bạn cũng có thể loại bỏ nó bằng URL phương thức. thu hồiObjectURL[]
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]
1
const fileUpload = document.querySelector["#file-upload"];
Phía trên là các trường hợp lệ thường gặp trong quá trình xử lý tệp đượ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