Thursday, 28 June 2012

Upload Image Into A Folder In Php Step By Step

22:51    No comments
This tutorial is about upload image to folder using PHP language. If you want to consider uploading to database you might read my tutorial. Uploading image is a feature in our application that everyone will love. So we begin...

Step 1. Create your html with form and file field and submit button inside. Name the form to imageUploadand apply enctype="multipart/form-data", this will allow the form to accept file as input. Name the input file to upload and submit button to xsubmit.

01<html>
02<head>
03<title>Upload Image To Folder In PHP Step By Step</title>
04</head>
05 
06<body>
07<form name="imgUpload" action=""method="post" enctype="multipart/form-data">
08<input type="file" name="upload" />
09<input type="submit" name="xsubmit" value="Upload" />
10</form>
11</body>
12</html>

...Before we proceed to step two, first we must understand about file information:
The global $_FILES  exists as of PHP 4.1.0 (Use $HTTP_POST_FILES  instead if using an earlier version). These arrays will contain all the uploaded file information. The contents of $_FILES from the example form is as follows. Note that this assumes the use of the file upload name upload, as used in the example script above. This can be any name.

The original name of the file on the client machine.
$_FILES['upload']['name']

The mime type of the file, if the browser provided this information. An example would be "image/gif". This mime type is however not checked on the PHP side and therefore don't take its value for granted.
$_FILES['upload']['type']

The size, in bytes, of the uploaded file.
$_FILES['upload']['size']

The temporary filename of the file in which the uploaded file was stored on the server. 
$_FILES['upload']['tmp_name']

The error code associated with this file upload. This element was added in PHP 4.2.0 
$_FILES['upload']['error']

Step 2. We gonna create our PHP upload code.
01<?php
02//Check if submit button exist and click
03if(isset($_POST['xsubmit'])) {
04  // get the original filename
05  $image = $_FILES['upload']['name'];
06  
07  // image storing folder, make sure you indicate the right path
08  $folder = "images/";
09  
10  // image checking if exist or the input field is not empty
11  if($image) {
12    // creating a filename
13    $filename = $folder . $image;
14  
15    // uploading image file to specified folder
16    $copied = copy($_FILES['upload']['tmp_name'], $filename);
17  
18    // checking if upload succesfull
19    if (!$copied) {
20  
21      // creating variable for the purpose of checking:
22      // 0-unsuccessfull, 1-successfull
23      $ok = 0;
24    } else {
25      $ok = 1;
26    }
27  }
28}
29?>
30 
31 
32<html>
33<head>
34<title>Upload Image To Folder In PHP Step By Step</title>
35</head>
36 
37<body>
38<form name="imgUpload" action="" method="post" enctype="multipart/form-data">
39<input type="file" name="upload" id="upload" />
40<input type="submit" name="xsubmit" value="Upload" />
41</form>
42</body>
43</html>

Step 3. After uploading the image, lets try to display it. Using our $ok variable we can apply checking for image existing and apply it to the image src of the image display. Here's the final code.

01<?php
02//Check if submit button exist and click
03if(isset($_POST['xsubmit'])) {
04  // get the original filename
05  $image = $_FILES['upload']['name'];
06  
07  // image storing folder, make sure you indicate the right path
08  $folder = "images/";
09  
10  // image checking if exist or the input field is not empty
11  if($image) {
12    // creating a filename
13    $filename = $folder . $image;
14  
15    // uploading image file to specified folder
16    $copied = copy($_FILES['upload']['tmp_name'], $filename);
17  
18    // checking if upload succesfull
19    if (!$copied) {
20  
21      // creating variable for the purpose of checking:
22      // 0-unsuccessfull, 1-successfull
23      $ok = 0;
24    } else {
25      $ok = 1;
26    }
27  }
28}
29?>
30 
31 
32<html>
33<head>
34<title>Upload Image To Folder In PHP Step By Step</title>
35 
36</head>
37 
38<body>
39<?php
40    //check if upload succesful then display it
41    if($ok == 1) {
42?>
43<img src="<?php echo $filename; ?>">
44<?php
45    }
46?>
47<form name="imgUpload" action="" method="post" enctype="multipart/form-data">
48<input type="file" name="upload" id="upload" />
49<input type="submit" name="xsubmit" value="Upload" />
50</form>
51</body>
52</html>

Before upload
File selected
After upload
Step 4. The upload accept anything aside from images, to filter and to accept only images we gonna add  validation function using Javascript. We gonna add id to our file input field, this id is the same as the name. To trigger our validation we can apply to onsubmit event in form or using onclick and attach to our submit button. Here's again the complete source code.

01<?php
02//Check if submit button exist and click
03if(isset($_POST['xsubmit'])) {
04  // get the original filename
05  $image = $_FILES['upload']['name'];
06  
07  // image storing folder, make sure you indicate the right path
08  $folder = "images/";
09  
10  // image checking if exist or the input field is not empty
11  if($image) {
12    // creating a filename
13    $filename = $folder . $image;
14  
15    // uploading image file to specified folder
16    $copied = copy($_FILES['upload']['tmp_name'], $filename);
17  
18    // checking if upload succesfull
19    if (!$copied) {
20  
21      // creating variable for the purpose of checking:
22      // 0-unsuccessfull, 1-successfull
23      $ok = 0;
24    } else {
25      $ok = 1;
26    }
27  }
28}
29?>
30 
31 
32<html>
33<head>
34<title>Upload Image To Folder In PHP Step By Step</title>
35<script type="text/javascript">
36  function checkExt(){
37    var filename = document.getElementById('upload').value;
38    var filelength = parseInt(filename.length) - 3;
39    var fileext = filename.substring(filelength,filelength + 3);
40   
41    // Check file extenstion
42    if (fileext.toLowerCase() != "gif" && fileext.toLowerCase() != "jpg" && fileext.toLowerCase() != "png") {
43      alert ("You can only upload png or gif or jpg images.");
44      return false;
45    } else {
46      return true;
47    }
48}
49</script>
50</head>
51 
52<body>
53<?php
54    //check if upload succesful then display it
55    if($ok == 1) {
56?>
57<img src="<?php echo $filename; ?>">
58<?php
59    }
60?>
61<form name="imgUpload" action="" method="post" enctype="multipart/form-data">
62<input type="file" name="upload" id="upload" />
63<input type="submit" name="xsubmit" value="Upload" onClick="return checkExt();" />
64</form>
65</body>
66</html>

This will pop-up if non-image uploaded

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Internet-PublicLab. Powered by Blogger.