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

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

value property (input:file)

Browser support:

Returns a string that contains the path or the name of the file or files selected with the current input:file element.

The value property of the input:file element is read-only, because of security reasons.
The value property contains the complete path to the selected file in Internet Explorer, the name of the selected file with a fake path in Opera and the name of the selected file in Firefox, Google Chrome and Safari.

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.

Not only the value property is suited to retrieve the selected files. With the files property, you can get a FileList collection that contains information about the selected files and provides access to their contents. Unfortunately the files property is not supported by all commonly used browsers.

Syntax:

object.value;

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

This property is read-only.

Possible values:

String that represents the path or the name of the selected file or files.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the value property:

<head>
    <script type="text/javascript">
        function GetInputValue () {
            var input = document.getElementById ("fileToUpload");
            alert (input.value);
        }
    </script>
</head>
<body>
    Please select a file to upload:<br />
    <input type="file" id="fileToUpload" size="50"/>
    <br /><br />
    <button onclick="GetInputValue ();">Get the path to the file to upload!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MULTIPLE HTML attribute and the value and files JavaScript properties:

<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>