Find out what a FileList object is and how to use it
When you have<input type="file" />
Element, when a user uploads one or more files, you will beFileList
purpose.
That's not the only place that can give you a chanceFileList
purpose. You will also get one when interacting with drag and drop.
Stick to the form. By default, the input type does not allow multiple files to be uploaded.
You will use only one element to retrieve the FileList, and you can use the following syntax to retrieve it:
<input type="file" />
const input = document.querySelector('input')
input.addEventListener(‘change’, e => {
const fileList = input.files
const theFile = fileList[0]
})
Select any element from itFileList
Object will get aFile
object. In this case we just have one, so we select the item at position 0.
You can also useitem()
Method, specify the index:
const input = document.querySelector('input')
input.addEventListener(‘change’, e => {
const fileList = input.files
const theFile = fileList.item(0)
})
If more than one is enabled, usemultiple
Attributes(<input type="file" multiple />
), FileList will contain multiple elements.
You can checklength
the property ofFileList
.
This example loads the uploaded files and iterates through them to print the name of each file:
<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)
}
})
Download mine for freeJavaScript beginner's manual
More browser tutorials:
- HTML5 provides some useful tips
- How do I make a CMS-based website work offline
- The complete guide to progressive web applications
- Extract API
- Push API guide
- Channel Messaging API
- Service staff tutorial
- Cache API guide
- Notification API guide
- Dive into IndexedDB
- Selectors API: querySelector and querySelectorAll
- Load JavaScript efficiently with delay and asynchrony
- Document Object Model (DOM)
- Web storage API: local storage and session storage
- Understand how HTTP cookies work
- History API
- WebP image format
- XMLHttpRequest (XHR)
- In-depth SVG tutorial
- What is the data URL
- Roadmap for learning network platforms
- CORS, cross-domain resource sharing
- Network worker
- requestAnimationFrame() guide
- What is Doctype
- Use DevTools console and console API
- Speech Synthesis API
- How to wait for DOM ready event in pure JavaScript
- How to add classes to DOM elements
- How to traverse DOM elements from querySelectorAll
- How to remove classes from DOM elements
- How to check if a DOM element has a class
- How to change the DOM node value
- How to add the click event to the list of DOM elements returned from querySelectorAll
- WebRTC, real-time Web API
- How to get the scroll position of an element in JavaScript
- How to replace DOM elements
- How to only accept images in the input file field
- Why use the preview version of the browser?
- Blob object
- File object
- FileReader object
- FileList object
- ArrayBuffer
- ArrayBufferView
- URL object
- Type array
- DataView object
- BroadcastChannel API
- Streams API
- FormData object
- Navigator object
- How to use the geolocation API
- How to use getUserMedia()
- How to use the drag and drop API
- How to scroll on a web page
- Processing the form in JavaScript
- Keyboard events
- Mouse event
- Touch event
- How to remove all children from DOM element
- How to create HTML attributes using raw Javascript
- How to check if the checkbox is checked using JavaScript?
- How to copy to clipboard using JavaScript
- How to disable buttons using JavaScript
- How to make a page editable in the browser
- How to use URLSearchParams to get query string value in JavaScript
- How to delete all CSS on the page at once
- How to use insertAdjacentHTML
- Safari, warning before exit
- How to add an image to the DOM using JavaScript
- How to reset the table
- How to use Google fonts