In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > files (input:file)

files property (input:file)

Browser support:

	3

Returns a FileList collection that represents the file or files selected with the current input:file element.

Note: The files property is supported in Firefox from version 3.

Through the FileList collection, you can get the name, size and the contents of the files. For example, it can be useful, if you want to check the files before upload.

By default, the input:file element only supports single file selection, but with the multiple property, you can allow users to upload more than one file with one input:file control during a form submission.

If you need to get the path of the selected files in browsers that do not support the files property, use the value property.

Syntax:

object.files;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

A FileList collection that represents the selected file or files.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the files property:

<head>
    <script type="text/javascript">
        function GetFileInfo () {
            var fileInput = document.getElementById ("fileInput");

            var message = "";
            if ('files' in fileInput) {
                if (fileInput.files.length == 0) {
                    message = "Please browse for one or more files.";
                } else {
                    for (var i = 0; i < fileInput.files.length; i++) {
                        message += "<br /><b>" + (i+1) + ". file</b><br />";
                        var file = fileInput.files[i];
                        if ('name' in file) {
                            message += "name: " + file.name + "<br />";
                        }
                        else {
                            message += "name: " + file.fileName + "<br />";
                        }
                        if ('size' in file) {
                            message += "size: " + file.size + " bytes <br />";
                        }
                        else {
                            message += "size: " + file.fileSize + " bytes <br />";
                        }
                        if ('mediaType' in file) {
                            message += "type: " + file.mediaType + "<br />";
                        }
                    }
                }
            } 
            else {
                if (fileInput.value == "") {
                    message += "Please browse for one or more files.";
                    message += "<br />Use the Control or Shift key for multiple selection.";
                }
                else {
                    message += "Your browser doesn't support the files property!";
                    message += "<br />The path of the selected file: " + fileInput.value;
                }
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetFileInfo ()">
    <input type="file" id="fileInput" multiple="multiple" size="60" onchange="GetFileInfo ()" />
    <div id="info" style="margin-top:30px"></div>
</body>