Allow Visitors To Upload Files

blue-sky · Post by **blue-sky** » Wed Jun 13, 2007 3:33 pm

Allow Visitors To Upload Files

Now let's talk about the <input type="file" /> which allows users to select a file for uploading to the server which will be sent to the server when submitted. The <input type="file" /> is accompanied by a browse button when rendered in a browser. When you **** the browse button a file dialog box and the path name of the selected file appears in the field or you can type the path name into the field.

Now in order for the <input type="file" /> to work you will need to have a server with a CGI script that will be invoked by the form's action attribute URL that will accept the form's incoming file.

Now if the path name exceeds the control's specified maxlength value, the entire path name of the selected field will still be placed into the field.

Now if you want to restrict the types of files that the users browser lets the user select you will use the accept attribute in the form tag to accomplish this. The accept attribute is a comma-separated list of MIME encodings. users will only be able to select only those files whose types matches one of those in the list.

Now the accept attribute is only used with the <input type="file" />.

If you are wondering what MIME stands for it stands for Multipurpose Internet Mail Extensions, I will only name some of the MIME encodings since there are many MIME types. Look for a future tutorial about MIME encodings for a better understanding of MIME types. Here are 3 types of MIME encodings (image/jpeg, text/richtext, and video/mpeg).

Now unlike other form input type controls the <input type="file" /> will only work correctly with a specific form data encoding and transmission method. Now if you use the <input type="file" /> you will have to set the enctype attribute to multipart/form-data and the method attribute to post in the form tag.

If you do not include the correct enctype and method attributes the <input type="file" /> will act like a regular text field by sending it's value which is the files path name to the server instead of the contents of the file itself.

The default value for the enctype attribute is application/x-www-form-urlencoded. And the default value for the method is get.

Now the <input type="file" /> has one required attribute which you should now already called name which gives a name to the <input type="file" /> when it is sent to the form-processing server.

Here is how to code the <input type="file" /> with it's required attributes.

<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>

<form method="post" accept="text/html" enctype="multipart/form-data" action="http://www.pageface.com/cgi/gdform.cgi">
<input type="file" name="file_to_uplodad">
</form>

</body>
</html>

anish · Post by **anish** » Thu Jun 14, 2007 7:33 am

Nice its a simple code.

webdesigner · Post by **webdesigner** » Thu Jun 14, 2007 8:13 am

pls post a php version of this upload script , thanks

Lixas · Post by **Lixas** » Thu Jun 14, 2007 8:29 am

file handler.php

[PHP]$target_path = "uploads/";

$target_path = $target_path . basename( $_FILES['file_to_upload']['name']);

if(move_uploaded_file($_FILES['file_to_upload']['tmp_name'], $target_path))
{
echo "The file ". basename( $_FILES['file_to_upload']['name']). " has been uploaded";
}
else
{
echo "There was an error uploading the file, please try again!";
}[/PHP]

Don't forget to set form's action to this file

Shahul · Post by **Shahul** » Mon Jul 23, 2007 1:38 pm

Thanks a lot Lixas..

Flipper3 · Post by **Flipper3** » Fri Jul 27, 2007 8:59 pm

Lixas, it is better to include the full target path. Like:

Code: Select all

/home/username/public_html/uploads/

Lixas · Post by **Lixas** » Mon Jul 30, 2007 6:30 am

Flipper3 wrote:Lixas, it is better to include the full target path.

Yes, you are right, because it such case it is more secure

web_master · Post by **web_master** » Mon Jul 30, 2007 10:26 am

Thanks for the post