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" >
GeeksforGeeks
</ 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