Đối tượng FileList

Tìm hiểu đối tượng FileList là gì và cách sử dụng nó

Khi bạn có Biểu mẫu HTML với<input type="file" />, khi một hoặc nhiều tệp được người dùng tải lên, bạn sẽ tương tác vớiFileListvật.

Đó không phải là nơi duy nhất có thể cung cấp cho bạnFileListvật. Bạn cũng sẽ nhận được một cái khi tương tác với Kéo và Thả.

Bám sát vào biểu mẫu, kiểu đầu vào theo mặc định không cho phép tải lên nhiều tệp.

Bạn sẽ truy xuất FileList chỉ với một phần tử và bạn có thể truy xuất nó bằng cú pháp sau:

<input type="file" />

const input = document.querySelector('input')
input.addEventListener(‘change’, e => {
const fileList = input.files
const theFile = fileList[0]
})

Chọn bất kỳ phần tử nào từ mộtFileListđối tượng sẽ nhận được mộtFile object. In this case we just have one, so we select the item at position 0.

Bạn cũng có thể lấy nó bằng cách sử dụngitem()phương pháp, chỉ định chỉ mục:

const input = document.querySelector('input')
input.addEventListener(‘change’, e => {
const fileList = input.files
const theFile = fileList.item(0)
})

Nếu nhiều người được bật, hãy sử dụngmultiplethuộc tính (<input type="file" multiple />), FileList sẽ chứa nhiều phần tử.

Bạn có thể nhận được số lượng bằng cách nhìn vàolengthtài sản củaFileList.

Ví dụ này tải các tệp được tải lên và lặp lại trên chúng để in tên của mỗi tệp:

<input type="file" multiple />

const input = document.querySelector('input')
input.addEventListener(‘change’, e => {
const files = input.files
const filesCount = fileList.length
for (let i = 0; i < files.length; i++) {
const file = files[i]
alert(file.name)
}
})

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript

Đối tượng FileList

Tìm hiểu đối tượng FileList là gì và cách sử dụng nó

Các hướng dẫn khác về trình duyệt: