Cara mengunggah dan memvalidasi gambar menggunakan php


Selamat malam sobat blogger kali ini saya akan share bagaimana cara mengunggah dan memvalidasi gambar di php. hal pertama yang anda harus lakukan adalah

  • Untuk judul Gambar dengan jenis input teks.
  • Yang kedua adalah untuk mengunggah gambar dengan file jenis input. Untuk input unggah file harus file (type = "file"). Jenis input ini menunjukkan kontrol pilih file.

Formulir HTML harus memiliki atribut berikut:
  • metode = "pos"
  • enctype = "multipart / form-data" (Atribut enctype menentukan bagaimana bentuk-data harus di-encode ketika mengirimkannya ke server.)

Hal penting yang harus anda ingat adalah tanpa form di atas unggahan gambar tidak akan berfungsi. script dibawah untuk mendapatkan nilai diposting, validasi gambar, memindahkan gambar ke direktori dan penyisipan data ke dalam database.


 <?php
include_once("config.php");
if(isset($_POST['submit']))
{
// Posted Values    
    $imgtitle=$_POST['imagetitle'];
    $imgfile=$_FILES["image"]["name"];
// get the image extension
    $extension = substr($imgfile,strlen($imgfile)-4,strlen($imgfile));
// allowed extensions
    $allowed_extensions = array(".jpg","jpeg",".png",".gif");
// Validation for allowed extensions
    if(!in_array($extension,$allowed_extensions))
    {
        echo "<script>alert('Invalid format. Only jpg / jpeg/ png /gif format allowed');</script>";
    }
    else
    {
//rename the image file
        $imgnewfile=md5($imgfile).$extension;  
// Code for move image into directory
        move_uploaded_file($_FILES["image"]["tmp_name"],"uploadeddata/".$imgnewfile);
// Query for insertion data into database  
        $query=mysqli_query($con,"insert into tblimages(ImagesTitle,Image) values('$imgtitle','$imgnewfile')");
        if($query)
        {
            echo "<script>alert('Data inserted successfully');</script>";
        }
        else
        {
            echo "<script>alert('Data not inserted');</script>";
        }}

    }
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Upload Images</title>
        <meta name="generator" content="Bootply" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" rel="home" >UPLOAD IMAGE</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

        </nav>

        <div class="container-fluid">

           <!--/left-->

           <!--center-->
           <div class="col-sm-6">
            <div class="row">
              <div class="col-xs-12">
                <h3>How to upload image in PHP</h3>

                <form name="uploadimage" enctype="multipart/form-data" method="post">
                    <table width="100%"  border="0">
                        <tr>
                            <th width="26%" height="60" scope="row">Image Title:</th>
                            <td width="74%"><input type="text" name="imagetitle" autocomplete="off" class="form-control" required /></td>
                        </tr>

                        <tr>
                            <th height="60" scope="row">Upload Image :</th>
                            <td><input type="file" name="image"  required /></td>
                        </tr>

                        <tr>
                            <th height="60" scope="row">&nbsp;</th>
                            <td><input type="submit" value="Submit" name="submit" class="btn-primary" /></td>
                        </tr>
                    </table>
                </form>

            </div>
        </div>
        <hr>
        
    </div><!--/center-->
</div><!--/container-fluid-->
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html> 

Buat database dengan nama gambar data. Di dalam database ini kita membuat tabel dengan tblimages nama.

 CREATE TABLE IF NOT EXISTS `tblimages` (
`id` int(11) NOT NULL,
`ImagesTitle` varchar(120) DEFAULT NULL,
`Image` varchar(150) DEFAULT NULL,
`PostingDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin1; 

Sekarang buat file koneksi database (config.php)
 
<?php
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'imagesdata');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
   echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?> 

Jika teman-teman ingin menempuh jalan pintas dengan script di atas, silahkan download dibawah ini.


Sekian share di atas semoga apa yang saya share bermanfaat bagi teman teman semua. jika teman2 kurang paham dengan skript di atas silahkan tinggalkan comment dibawah.