HTML | DOM Input FileUpload files Property
The Input FileUpload files Property in HTML DOM is used to return a FileList object, representing one or multiple files selected with the file upload button and This is a read-only property.
Through the FileList object, you can get the information about the files.
Syntax:
fileuploadObject.files
Return Values : It returns a FileList object which represent the selected file or files.
Examples:
html
<!DOCTYPE html> < html > < head > < title > Input FileUpload files Property </ title > </ head > < body onload = "myFunction()" > < center > < h1 style = "color: green" > w3wiki </ h1 > < p > < b > DOM Input FileUpload files Property </ b > </ p > < input type = "file" id = "myFile" multiple size = "50" onchange = "myFunction()" > < p id = "demo" ></ p > < script > function myFunction() { var GFG = document.getElementById("myFile"); var msg = ""; if ('files' in GFG) { if (GFG.files.length == 0) { msg = "Select multiple files using" + " 'Shift'."; } else { for (var i = 0; i < GFG.files.length ; i++) { msg += "<br>< strong >" + (i + 1) + ". file</ strong >< br >"; var file = GFG.files[i]; if ('name' in file) { msg += "name: " + file.name + "< br >"; } if ('size' in file) { msg += "size: " + file.size + " bytes < br >"; } } } } else { if (GFG.value == "") { msg += "Select multiple" + " files using 'Shift'."; } else { msg += "This file property" + " is not supported!!"; /* If the browser does not support the files property, it will return the path of the selected file instead. */ msg += "< br >The path of the " + "selected file: " + GFG.value; } } document.getElementById("demo").innerHTML = msg; } </ script > </ center > </ body > </ html > |
Output:
Before:
After:
Supported Browsers:
- Google Chrome 1
- Edge 12
- Mozilla Firefox 1
- Opera 11
- Safari 1