File upload input form field in html web page

As you have seen different form components to handle various types of Inputs, now we will learn how to upload files from the client computer to the server by using file type input text box. In our normal input box the type attribute is set to TEXT but here our input type is set to FILE.

<FORM ENCTYPE="multipart/form-data" ACTION="uploadck.php" METHOD=POST>

<INPUT NAME="file_up" TYPE="file">

This input box is a special type of box where one browse button will appear and using that user can open a file explorer to point to a file of local machine. After selection of the file the path of the file will appear in the file input box. The form type is set to ENCTYPE="multipart/form-data" . Note that we are not going to discuss here how to handle the file upload, this is explained in our php file upload section.

Here is the sample form to display a file upload text box with browse button.

<FORM ENCTYPE="multipart/form-data" ACTION="uploadck.php" METHOD=POST>
Upload this file: <INPUT NAME="file_up" TYPE="file">
<INPUT TYPE="submit" VALUE="Send File"></FORM>

Here is the form with file upload button. ( This is not connected to any file handling script )
HTML Form Buttons in form Reset button of a Web form

File upload form component

Subscribe