Hướng dẫn chọn file trong html

Trong HTML 5 trên Firefox, File API đã được thêm vào trong DOM, nó cho phép yêu cầu user chọn file trên local và đọc nội dung của các file đó. Việc chọn này được dùng thông qua thẻ hay bằng cách kéo và thả [drag and drop]

Nếu bạn muốn sử dụng DOM File API từ extension khác hoặc từ chrome, bạn có thể nhưng sẽ có một vài tính năng bổ sung. Nếu muốn biết rõ hơn các tính năng trong chrome thì bạn có thể tham khảo trong DOM File API in chrome code

Truy cập các file được chọn

Với mã HTML:

File API giúp bạn dễ dàng truy cập vào một FileList chứa các đối tượng File biểu diễn các file được chọn bởi người dùng.

Với thuộc tính multiple trong thẻ input cho phép user chọn nhiều file

Muốn truy cập vào file được chọn đầu tiên thì sử dụng selector DOM thông thường:

const selectedFile = document.getElementById['input'].files[0];

Truy cập file được chọn trong sự kiện change

Để truy cập vào FileList thông qua sự kiện change, bạn chỉ cần dùng EventTarget.addEventListener[] để thêm listener cho sự kiện change:

const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
  const fileList = this.files; /* now you can work with the file list */
}

Lấy thông tin từ file được chọn

Đối tượng FileList của DOM sẽ hiện toàn bộ các file được chọn bởi user, mỗi file là một đối tượng File. Bạn có thể xác định có bao nhiêu file mà user chọn bằng cách kiểm tra giá trị length của danh sách file.

const numFiles = fileList.length;

Các đối tượng File có thể được truy cập chỉ đơn giản bằng cách truy cập vào danh sách như một mảng:

for [let i = 0, numFiles = fileList.length; i