Tải lên nhiều tệp trong javascript

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

1, API

2 hoặc Axios

Bạ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ử

3 như sau

const formData = new FormData()

Tham chiếu

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 đó,

• 1. dùng để xóa một cặp khóa-giá trị,

• 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,

• 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,

• 4. được sử dụng  để trả về tất cả các giá trị cho một khóa được chỉ định,

• 5. được sử dụng để kiểm tra xem có chìa khóa không,

• 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,

• 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,

• 8. trả về một đối tượng Iterator cho các giá trị của đối tượng FormData

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,

1 và

00

Điều hướng đến thư mục làm việc của bạn và tạo và tệp

01 với nội dung sau

Chúng tôi chỉ cần tạo một tài liệu HTML với một

02 được xác định bởi ID

03. Tiếp theo, chúng tôi bao gồm tệp

04 bằng cách sử dụng thẻ

05

Tiếp theo, tạo tệp

04 và thêm đoạn mã sau

0

Trước tiên, chúng tôi chèn phần tử

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ên

Tiế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

08

Tiếp theo, chúng tôi xác định phương pháp

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

1 và một đối tượng

00 trống

Chú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

09, vào khóa

24. Thao tác này sẽ tạo một cặp khóa-giá trị với

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

26 của

1 và chúng tôi chuyển vào đối tượng

00 làm đối số

Sau khi xác định phương thức

09, chúng tôi lắng nghe sự kiện thay đổi trên phần tử

00 và chúng tôi gọi phương thức  

09 với tệp đã chọn làm đối số. Tệp được truy cập từ mảng

02

Bạ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

03 vào phần tử

00

2

Bâ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

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

00

0

Cuối cùng, gọi phương thức với một mảng tệp làm đối số

9

Tiế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

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

---

Ahmed Bouchefra

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