Javascript: Hiểu giao diện tệp

Question

Tôi bắt đầu với Javascript và cố gắng hiểu một số nguyên tắc cơ bản. Các câu hỏi không phải là cụ thể về giao diện tập tin, nhưng nó là những gì tôi đang cố gắng tìm ra.

Trong tệp HTML của tôi, tôi có đầu vào loại tệp.

<input type="file" id="fileInput" multiple/> 

Sau đó, trong tập tin JS của tôi, tôi có:

var fileVar = document.getElementById('fileInput').files[0]; 

này hoạt động tốt và filevar là loại File.

Bây giờ tôi đang cố gắng hiểu cách hoạt động của thuộc tính files.

Trong W3 API được định nghĩa là:

interface FileList { 
     getter File? item(unsigned long index); 
     readonly attribute unsigned long length; 
    }; 

Tôi đang cố gắng tìm ra làm thế nào tôi có thể truy cập File của cá nhân trong FileList bằng cách sử dụng files. Nó dường như không được định nghĩa ở bất cứ đâu. Đâu là mảng files đến từ đâu?

Answer 1

Tài sản files trả về FileList.

files là tài sản của HTMLInputElement Interface, tức là giao diện DOM cho các thẻ <input>. Nó được thực hiện bởi các trình duyệt hỗ trợ API tệp HTML5.

Để truy cập các tệp riêng lẻ, bạn chỉ có thể lặp lại chúng như bất kỳ Danh sách/mảng nào khác. Ví dụ .:

var files = element.files; //where `element` is a file input element reference 
//`files` references a FileList, you can iterate over it and access its File objects 
for (var i = 0; i < files.length; i++) { 
    console.log('File '+ i +"'s name = " + files[i].name + 
     '; size: ' + files[i].size + ' bytes'); 
} 

Demo

MDN có một hướng dẫn tốt đẹp cho using the File API là tốt.