Tutorial Image Uploading, Saving and Showing.

Case Study : Create a script to image uploading, save image location to database, and show them.
Requirements : Webserver Packages, already installed.

Follow all this step,

Step 1 : Prepare the Database

  1. Create database named db_tutorial
  2. Prepare table named tb_image, see the table’s structure below.
  3. Done with the database!

Step 2 : Prepare the wcorking folder

  1. Create folder named helloMobile in your document root
  2. Create folder again named image inside helloMobile folder created before. This Folder required for saving the image that have been uploaded.
  3. Save all file in this tutorial in the helloMobile folder.

Step 3 : Create script connect to DB

  1. Type the following script,
    [sourcecode language=”php”]
    $host = "localhost";
    $user = "root";
    $pass = "";
    $dbName = "db_tutorial";
    mysql_connect($host, $user, $pass);
    or die ("Connect Failed !! : ".mysql_error());
  2. Save with the name connect.php, and save in the helloMobile folder

Step 4 : Create the upload image form

  1. Type the following script,
    [sourcecode language=”php”]
    <form name="form" method="post" enctype="multipart/form-data" action="proses.php">
    Image : <input name="picture" type="file" />
    <input type="submit" name="upload" value="Upload" />
  2. Save with the name formupload.php, save in the helloMobile folder

Step 5 : Create processing script

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    include "connect.php";
    $fileName = $_FILES[‘picture’][‘name’]; //get the file name
    $fileSize = $_FILES[‘picture’][‘size’]; //get the size
    $fileError = $_FILES[‘picture’][‘error’]; //get the error when upload
    if($fileSize > 0 || $fileError == 0){ //check if the file is corrupt or error
    $move = move_uploaded_file($_FILES[‘picture’][‘tmp_name’], ‘E:/DocumentRootYuni/helloMobile/image/’.$fileName); //save image to the folder
    echo "<h3>Success! </h3>";
    $q = "INSERT into tb_image VALUES(”,’$fileName’,’image/$fileName’)"; //insert image property to database
    $result = mysql_query($q);

    $q1 = "SELECT location from tb_image where filename = ‘$fileName’ limit 1 "; //get the image that have been uploaded
    $result = mysql_query($q1);
    while ($data = mysql_fetch_array($result)) {
    $loc = $data[‘location’]; ?>
    <h2> This is the Image : </h2>
    <img src="<?php echo $loc; ?>" /> <!– show the image using img src –>
    } else{
    echo "<h3>Failed! </h3>";
    } else {
    echo "Failed to Upload : ".$fileError;

  2. Save with the name prosesupload.php
  3. See the script’s comment for the explanation πŸ˜€

Step 6 : Testing Code

  1. Go to http://localhost/helloMobile/formupload.php. And you will see the form below,
  2. Try to upload image. Choose a image file with click browse button
  3. Save. So the image will be shown to you πŸ˜€

Oleh littleflow3r

obviously, a girl. with sweet smile, off course. turning her 21 years trapped on Informatics departement and just started to having some crush with it lately. she uses wordpress. she loves php. she loves to satisfied her shopping hobbies just via looking around in online shop. oh yeah, she got an A for her english subject^^

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.