In this tutorial, I’m going to make simple html form, to grab the file information from user’s device then save the selected image or file to the server using php. In almost all type of websites uploading images is common where you use them for either gallery, profile picture or any other task. Alright, I’ll explain each step in brief. You better concentrate on the comments given in php scripting, everything defines itself.
Creating form
To create a simple html form, make a .htm, .php or any other file. It doesn’t matter until you describe the action of form to the file itself. Here is the form we’re going to use in this tutorial:
|
| <h1>Upload new profile picture!</h1><hr /><form action=”upload.php” method=”post” enctype=”multipart/form-data”>Select <span id=”IL_AD8″>your image</span> <span id=”IL_AD6″>file from</span> disk:<<span id=”IL_AD9″>input type</span>=”file” name=”photo” id=”photo”>
<input type=”submit” name=”submit” value=”Change profile picture”> </form> |
In above form, we’ve dsecribed the method to post and name of file to photo. These are one of sensitive information we need to take care about while transferring data over network. Now, let’s create upload.php where all the script will work!
Creating upload.php
After retrieving data using html form, everything will be sent over upload.php as we’ve described action of form to upload.php. Instead of $_POST[], there is a command named $_FILES[] in php, made for only files selected through forms. Basic syntax of $_FILES[] is:
| 1 | $_FILE[‘filename’][‘fileproperty’]; |
In this tutorial, filename is photo and there are in-built properties [ or reserved variables ] for $_FILE command. These properties are given below:
- $_FILES[‘filename’][‘name’] – Name of the uploaded file
- $_FILES[‘filename’][‘type’] – Type of the uploaded files
- $_FILES[‘filename’][‘size’] – Size of uploaded files ( in bytes )
- $_FILES[‘filename’][‘error’] – Error while uploading files
- $_FILES[‘filename’][‘tmp_name’] – Temporary name of uploading files
Now, let’s start with php scripting:
| 1 | <?php |
if(isset($_FILES[‘photo’])) // If form was submitted
{
if($_FILES[‘photo’][‘size’] < 500000) // Check if file size is more then 5 mb
{
//This is the directory where images will be saved
$target = “images/userpics/”; // Location of directory where we gonna upload
$target = $target . basename( $_FILES[‘photo’][‘name’]);
$filename=$_FILES[‘photo’][‘name’];
$filetype=$_FILES[‘photo’][‘type’];
$filename = strtolower($filename);
$filetype = strtolower($filetype);
$file_ext = strrchr($filename, ‘.’);
// Checking for extensions
$whitelist = array(“.jpg”,”.jpeg”,”.gif”,”.png”);
if (!(in_array($file_ext, $whitelist))) {
die(‘not allowed extension,please upload images only’);
}
//checking for upload type
$checkpos = strpos($filetype,’image’);
if($checkpos === false) {
die(‘error 1′);
}
$imageinfo = getimagesize($_FILES[‘photo’][‘tmp_name’]);
if($imageinfo[‘mime’] != ‘image/gif’ && $imageinfo[‘mime’] != ‘image/jpeg’&& $imageinfo[‘mime’] != ‘image/jpg’&& $imageinfo[‘mime’] != ‘image/png’) {
die(‘error 2′);
}
if(substr_count($filetype, ‘/’) > 1)
{
die(‘error 3′);
}
//check if contain php file and kill it
$pos = strpos($filename,’php’);
if(!($pos === false)) {
die(‘error’);
}
//This gets all the other information from the form
$pic=($_FILES[‘photo’][‘name’]);
//Writes the photo to the server
if(move_uploaded_file($_FILES[‘photo’][‘tmp_name’], $target))
{
//Tells you if its all ok
echo “The file “. basename( $_FILES[‘photo’][‘name’]). ” has been uploaded, and your information has been added to the directory”;
}
else
{
//Gives and error if its not
echo “Sorry, there was a problem uploading your file.”;
}
}
else
{
echo “File size error! Your file is too big to upload!”;
}
}?>
Above php script is perfect for first time image uploading with a little bit validation. If you want to store information of uploaded file on mysql database, simply add your sql query in the box where move_uploaded_file command take place. Basically, file type form submission stores temporary file on the server, to make it permanent we do use move_uploaded_file(photo-tempname, location), as everything cleared in above example! Now, you’ve successfully uploaded an image to your server disk, to ensure that you can see your server’s folder images/userpics folder. For any question answer, reply.