FileList与File[]的区别及浏览器文件拖拽中FileList的作用问询

Great question—you’re right that at first glance, these two seem almost identical, but there are key differences and intentional design choices behind FileList that are easy to miss. Let’s break this down:

Core Differences Between FileList and File[] #

• Immutability & Controlled Modification
  FileList is a read-only, browser-controlled collection: you can’t add, remove, or reorder files using methods like push(), splice(), or pop() like you can with a regular File[]. The contents of a FileList are strictly determined by user actions (e.g., selecting files via an <input> or dragging them into the browser)—scripts can’t alter it. A File[], by contrast, is fully mutable; you can modify it freely.

• Prototype & Built-in Methods
  FileList is a DOM-specific array-like object, not a native JavaScript Array. It inherits from HTMLCollection (in modern browsers) and only has a few built-in methods: item(index) (to get a file by position) and length. It doesn’t have access to Array methods like forEach(), map(), or filter() unless you convert it first. A File[] has all the standard Array methods out of the box.

• Live vs. Static Reference
  In cases where a FileList is tied to a DOM element (like <input type="file">), it’s a live reference to the element’s current file selection. If the user changes their selection (e.g., picks new files), the FileList automatically updates to reflect the new state. A File[] you create from a FileList is a static snapshot—it won’t change even if the user updates their selection.

Why Was FileList Designed This Way? #

The design of FileList boils down to three key goals:

1. Security First
   Browsers need to ensure that file selections are controlled by the user, not scripts. Making FileList read-only prevents malicious code from faking user-selected files (e.g., adding a sensitive system file to the list without the user’s knowledge). This is a critical security boundary between the web page and the user’s local file system.

2. DOM API Consistency
   When FileList was first introduced (back in the early 2000s, even before ES5), DOM APIs commonly used array-like objects (like NodeList and HTMLCollection) instead of native Arrays. These objects followed a consistent pattern: read-only, with item() access and a length property. FileList fit into this existing design language to keep the DOM API predictable.

3. Live Binding for Dynamic UI
   For elements like <input type="file">, having a live FileList means you don’t need to re-fetch the file collection every time the user changes their selection. You can hold a reference to the FileList and it will always reflect the current state, simplifying code for dynamic file upload UIs.

What You Might Be Missing About FileList’s Utility #

While it’s true that FileList lacks native Array methods, modern JavaScript makes this a non-issue: you can easily convert a FileList to a File[] using Array.from(fileList) or the spread operator [...fileList]. Once converted, you can use all your favorite Array methods to process the files.

Additionally, its immutability is a feature, not a bug: it guarantees that the files you’re working with are exactly what the user selected, with no accidental modifications from your code.

内容的提问来源于stack exchange，提问作者Simon Warta