Input FileUpload files Property - Javascript DOM HTML Element

Javascript examples for DOM HTML Element:Input FileUpload

  1. HOME
  2. Javascript
  3. DOM HTML Element
  4. Input FileUpload

Description

The files property returns a FileList object, representing the file or files selected with the file upload button.

This property is read-only.

Return Value

A FileList object that represents the selected file or files

The following code shows how to select one or more files with the file upload button, and display some information about the selected file(s):

Use the Control or the Shift key to select multiple files.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<input type="file" id="myFile" multiple size="50" onchange="myFunction()">

<p id="demo"></p>

<script>
function myFunction(){//  w  w  w  .  j a v a 2 s  .c o  m
    var x = document.getElementById("myFile");
    var txt = "";
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Select one or more files.";
        } else {
            for (var i = 0; i < x.files.length; i++) {
                txt += "<br>" + (i+1) + ". file<br>";
                var file = x.files[i];
                if ('name' in file) {
                    txt += "name: " + file.name + "<br>";
                }
                if ('size' in file) {
                    txt += "size: " + file.size + " bytes <br>";
                }
            }
        }
    }
    else {
        if (x.value == "") {
            txt += "Select one or more files.";
        } else {
            txt += "The files property is not supported by your browser!";
            txt  += "<br>path: " + x.value; 
        }
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Related Tutorials