Some web application may require users to upload documents. A student admission portal may require a student to upload her image, academic and other documentary proofs. An online hospital portal may ask patients to upload their medical history in PDF format before a physical visit to consulting doctor. HTML Input File control allows you to add such functionality in your web application.
It is presented as a clickable button. It is labeled as ‘Select file’ or ‘Select Files’ The button is followed by a label that initially displays “No File chosen”.
When a user clicks this ‘Select File’ button, the standard File Open Dialog box opens up. A user can browse through her folders to select one or more of the available files. If a single file is chosen its file name will be displayed in the label on the right to the browse button. If you select more than one file then only the count of selected files will be displayed.
The selected file(s) will be uploaded on the web server of the web application using appropriate script mentioned in the Form’s ACTION attribute.
Syntax – HTML Input File
An input file control in an HTML form is created by using <INPUT> tag. The TYPE attribute is given value “FILE” along with other attributes.
<INPUT TYPE=”FILE” [tag attributes]>
Attributes- HTML Input File
HTML Input File control created with <INPUT> tag uses the following attributes.
ID
This attribute is used to give identification to the file control in a web form. The ID must be an alphanumeric string. The ID value for each field of web form must be unique. This ID is used in a script to manipulate the file(s) chosen by the user.
NAME
The NAME attribute is used to give name to HTML Input File control. The name attribute is used to access the files chosen by associated php or asp script file.
VALUE
The VALUE attribute represents the file name selected by the user. The value will be the name displayed in the right side label when MULTIPLE attribute is not set.
ACCEPT
The accept attribute works like a filter. It specifies the type of files that a user can choose using HTML Input File. It is defined as a comma-separated list of file type. This attribute will inhibit the other type of files to appear in the File Open Dialog Box. For example if you set ACCEPT=”.pdf” then no other files will be visible in the open dialog box except .pdf files.
MULTIPLE
If you include this attribute in INPUT tag, users can choose multiple files in Open File Dialog Box. More than one files are selected by CTRL + Clicking on the file names. The label on the right of the browse button will show the count of files selected. When this property is set, the button text changes from ‘Select file’ to ‘Select Files’.
FILES
Attribute represents the list of multiple files selected by user when MULTIPLE attribute is set.
Example of HTML Input File
<HTML> <H2>Upload your Documents</H2> <HR> <FORM ACTION="save.php" METHOD="POST"> <H3>Upload your Picture</H3> <INPUT TYPE="file" NAME="image" ACCEPT=".jpg,.png" > <H3> Upload your Files</H3> <INPUT TYPE="file" NAME="filelist" ACCEPT=".doc,.docx,.pdf" MULTIPLE > </FORM> </HTML>
