Uploading Files
Forward: In this tutorial, I explain how you can use HTML to upload files from the client computer to the server.
By: Chrysanthus Date Published: 26 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Prerequisite
You need basic knowledge in HTML, ECMAScript and DOM in order to understand this tutorial.
File types
Files exist in categories and each category has sub categories. A file can be of the category: image, video, audio, text, etc. The text file, for example, can be of subcategories, plain, ECMAScript, css, html etc. An image file can be of subcategory, gif, png, jpg, etc. In many cases the subcategory names are from extensions of the file names. You can hear of the following file types: text/html, image/png, image/gif, video/mpeg, text/css, audio/basic, etc.
Uploading a Single File
To upload a single file, the method attribute of the form should have the value, “post”; the form should also have the attribute, enctype, with the value "multipart/form-data". In addition to that, the form should also have the input control, whose type has the value, “file”.
When the value of the type attribute of an input control is, “type” the input control will appear at the browser as a text control with a button next to it. When this button is clicked, a directory tree of the client’s computer opens in a dialog box so that the user can select a file. The dialog box is like the Open dialog box of an application. The user selects a file by clicking its name in the dialog box. After clicking (selecting) the name of a file, the user clicks the “Open” button of the dialog box and the dialog box would close. The client computer path ending with the file name, should then appear in the text area of the input file control. “Input File Control” is my phrase for the combined text control and button. Read and display the following code; then click the button of the input file control.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>A Control</p>
<form method="post" action="http://somesite.com/dir/script.exe" enctype="multipart/form-data">
<p><input type="file" name="thefile"></p>
<p><button type="submit">Send</button></p>
</form>
</body>
</html>
The file is sent to the server along with the name/value pairs of other controls in the form, when the submit button is clicked. When you learn a server-scripting language like PHP or Perl, you will learn how to receive at the server, the file sent. Note that the input file control like other controls must have a name.
The Form accept Attribute
A form has an attribute called the accept attribute. This attribute can be used to indicate to the browser the type of files that the author (you the coder) wants uploaded. The value of this file attribute is a comma-separated list of file types. Something like in:
<form accept="image/png, image/gif, image.jpg" method="post" action="http://somesite.com/dir/script.exe" enctype="multipart/form-data">
Uploading More than One File
There are two ways of uploading more than one file. You can have more than one input file controls in your form. Alternatively, you can use the multiple Boolean attribute in the input file control tag. For the first way, you can have code like:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>A Control</p>
<form method="post" action="http://somesite.com/dir/script.exe" enctype="multipart/form-data">
<p><input type="file" name="thefile1"></p>
<p><input type="file" name="thefile2"></p>
<p><input type="file" name="thefile3"></p>
<p><button type="submit">Send</button></p>
</form>
</body>
</html>
For the second way you would have code like:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>A Control</p>
<form method="post" action="http://somesite.com/dir/script.exe" enctype="multipart/form-data">
<p><input type="file" name="thefiles" multiple></p>
<p><button type="submit">Send</button></p>
</form>
</body>
</html>
With this second way, when the dialog box is opened, the user can hold down the Control Key on the keyboard and select more than one file with the mouse. Experiment with the above two code samples. For the second way, you will end up with paths separated by commas, each ending with a filename in the text area of the single input file control.
As said above when you will learn a server-side script language like PHP, or Perl, you will learn how to receive the files at the server.
With that we come to the end of the tutorial.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course