Hướng dẫn nhanh về cách sử dụng tải lên nhiều tệp HTML 5. HTML 5 cho phép tải lên nhiều tệp bằng một đầu vào duy nhất, Chỉ cần thêm nhiều thuộc tính cho phép nhiều tệp được tải lên thông qua một phần tử INPUT
Trong bài đăng này, chúng ta sẽ tìm hiểu về giao diện FormData có sẵn trong các trình duyệt web hiện đại như một phần của thông số HTML5
Chúng ta sẽ xem các ví dụ về cách sử dụng FormData với Ajax, Angular 7, Ionic và React
FormData là gì
FormData chỉ đơn giản là một cấu trúc dữ liệu có thể được sử dụng để lưu trữ các cặp khóa-giá trị. Giống như tên gọi của nó, nó được thiết kế để giữ dữ liệu biểu mẫu. e bạn có thể sử dụng nó với JavaScript để xây dựng một đối tượng tương ứng với biểu mẫu HTML. Nó hầu như hữu ích khi bạn cần gửi dữ liệu biểu mẫu tới các điểm cuối API RESTful, chẳng hạn như để tải lên một hoặc nhiều tệp bằng giao diện
Parcel Sandbox
1, API
Parcel Sandbox
2 hoặc AxiosBạn có thể tạo một đối tượng FormData bằng cách khởi tạo giao diện FormData bằng cách sử dụng toán tử
Parcel Sandbox
3 như sauconst formData = new FormData[]
Tham chiếu
Parcel Sandbox
4 đề cập đến một phiên bản của FormData. Có thể gọi nhiều phương thức trên đối tượng để thêm và làm việc với các cặp dữ liệu. Mỗi cặp có một khóa và giá trịĐây là những phương thức có sẵn trên các đối tượng FormData
0. được sử dụng để nối thêm một cặp khóa-giá trị vào đối tượng. Nếu khóa đã tồn tại, giá trị sẽ được thêm vào giá trị ban đầu cho khóa đó,Parcel Sandbox
1. dùng để xóa một cặp khóa-giá trị,Parcel Sandbox
2. trả về một đối tượng Iterator mà bạn có thể sử dụng để lặp qua danh sách các cặp giá trị chính trong đối tượng,Parcel Sandbox
3. được sử dụng để trả về giá trị cho một khóa. Nếu nhiều giá trị được thêm vào, nó sẽ trả về giá trị đầu tiên,Parcel Sandbox
4. được sử dụng để trả về tất cả các giá trị cho một khóa được chỉ định,Parcel Sandbox
5. được sử dụng để kiểm tra xem có chìa khóa không,Parcel Sandbox
6. trả về một đối tượng Iterator mà bạn có thể sử dụng để liệt kê các khóa khả dụng trong đối tượng,Parcel Sandbox
7. được sử dụng để thêm một giá trị cho đối tượng, với khóa được chỉ định. Điều này sẽ thay thế giá trị nếu một khóa đã tồn tại,Parcel Sandbox
8. trả về một đối tượng Iterator cho các giá trị của đối tượng FormDataParcel Sandbox
Ví dụ tải lên tệp với Vanilla JavaScript
Bây giờ chúng ta hãy xem một ví dụ đơn giản về tải tệp lên bằng vanilla JavaScript,
Parcel Sandbox
1 và
Parcel Sandbox
00Điều hướng đến thư mục làm việc của bạn và tạo và tệp
Parcel Sandbox
01 với nội dung sau
Parcel Sandbox
Chúng tôi chỉ cần tạo một tài liệu HTML với một
Parcel Sandbox
02 được xác định bởi ID
Parcel Sandbox
03. Tiếp theo, chúng tôi bao gồm tệp
Parcel Sandbox
04 bằng cách sử dụng thẻ
Parcel Sandbox
05Tiếp theo, tạo tệp
Parcel Sandbox
04 và thêm đoạn mã sau
Parcel Sandbox
0Trước tiên, chúng tôi chèn phần tử
Parcel Sandbox
07 vào trang HTML của mình. Điều này sẽ được sử dụng để chọn tệp mà chúng tôi sẽ tải lênTiếp theo, chúng tôi truy vấn phần tử đầu vào của tệp bằng phương pháp
Parcel Sandbox
08Tiếp theo, chúng tôi xác định phương pháp
Parcel Sandbox
09, trong đó trước tiên chúng tôi khai báo một biến ______220 chứa địa chỉ của điểm cuối tải lên tệp của chúng tôi. Tiếp theo, chúng tôi tạo một yêu cầu
Parcel Sandbox
1 và một đối tượng
Parcel Sandbox
00 trốngChúng tôi sử dụng phương thức chắp thêm của FormData để nối tệp, được truyền dưới dạng tham số cho phương thức
Parcel Sandbox
09, vào khóa
Parcel Sandbox
24. Thao tác này sẽ tạo một cặp khóa-giá trị với
Parcel Sandbox
24 làm khóa và nội dung của tệp được chuyển làm giá trịTiếp theo, chúng tôi gửi yêu cầu bằng cách sử dụng phương pháp
Parcel Sandbox
26 của
Parcel Sandbox
1 và chúng tôi chuyển vào đối tượng
Parcel Sandbox
00 làm đối sốSau khi xác định phương thức
Parcel Sandbox
09, chúng tôi lắng nghe sự kiện thay đổi trên phần tử
Parcel Sandbox
00 và chúng tôi gọi phương thức
Parcel Sandbox
09 với tệp đã chọn làm đối số. Tệp được truy cập từ mảng
Parcel Sandbox
02Bạn có thể thử nghiệm với ví dụ này từ hộp cát mã này
Tải lên nhiều tệp
Bạn có thể dễ dàng sửa đổi mã ở trên để hỗ trợ tải lên nhiều tệp
Trước tiên, bạn cần thêm thuộc tính
Parcel Sandbox
03 vào phần tử
Parcel Sandbox
00
Parcel Sandbox
2Bây giờ, bạn sẽ có thể chọn nhiều tệp từ ổ đĩa của mình
Tiếp theo, thay đổi phương thức
Parcel Sandbox
09 để chấp nhận một mảng các tệp làm đối số và chỉ cần lặp qua mảng đó và nối các tệp vào đối tượng
Parcel Sandbox
00
Parcel Sandbox
0Cuối cùng, gọi phương thức với một mảng tệp làm đối số
Parcel Sandbox
9Tiếp theo, bạn có thể xem các hướng dẫn nâng cao này để biết cách sử dụng
Parcel Sandbox
00 với Angular, Ionic và React- Cách đăng FormData với Angular 7
- Dữ liệu biểu mẫu React và Axios
- Tải lên nhiều tệp với Ionic 4 & FormData
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nhà phát triển và tác giả có bằng bac + 5 [bằng Thạc sĩ] về phát triển phần mềm. Anh ấy xây dựng ứng dụng và viết nội dung kỹ thuật về JS, Angular và Ionic. Ông cũng thích thơ ca và giảng dạy
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu