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

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

multiple property (input:file)

Browser support:

	3.6

Sets or retrieves whether more than one file can be selected with the current input:file element.

Note: The multiple property is supported in Firefox from version 3.6.

By default, the input:file element only supports single file selection, so only one file can be uploaded with one input:file control at a time. With the multiple property you can allow users to upload more than one file with one input:file control during a form submission. To select multiple files, hold down the CTRL or SHIFT key while selecting.

Sometimes the files selected with the input:file control need to be checked before submission. For that cases, you can use the value property. 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.multiple;

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

This property is read/write.

HTML page for this property: MULTIPLE

Possible values:

Boolean that indicates whether multiple selection is allowed.

One of the following values:

false

Default. Multiple selection is disabled.

true

Multiple selection is enabled.

Default: false.

Example HTML code 1:

This example illustrates the use of the MULTIPLE attribute:

<form method="post" enctype="multipart/form-data" action="#URL#">
    Select one or more files to upload: <input type="file" name="uploadFile" size="60" multiple="multiple" />
    <br />
    To select multiple files, hold down the CTRL or SHIFT key while selecting.
    <br /><br />
    <input type="submit" value="Upload" />
</form>

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

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

            fileInput.multiple = multiCBox.checked;
        }
    </script>
</head>
<body onload="UpdateMultiple ()">
    <input id="multi" type="checkbox" onclick="UpdateMultiple ()" />Allow multiple file selection
    <br /><br />
    Select one or more files to upload: <input id="fileInput" type="file" name="uploadFile" size="60" />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

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>