» » » » » » jQuery AJAX PHP image upload ala facebook

jQuery AJAX PHP image upload ala facebook

Oleh



Kali ini saya akan menulis tutorial cara membuat upload image/gambar seperti di facebook menggunakan jQueryForm dan PHP tentunya.
Awalnya saya iseng-iseng saja membuat upload gambar ala facebook ini dan emang g mirip :D karena ada pertanyaan dari salah satu member PHP Indonesia"bagaimana cara membuat fitur upload foto ala facebook?" maka sayapun langsung mencoba untuk mengimplementasikannya menggunakan jQuery dan PHP karna saya baru bisa pke itu saja :D walaupun g mirip sih, tapi lumayanlah buat nambah insfirasi. hhe
Ok langsung saja kita coba membuatnya di localhost:
1. Buat folder apasaja di localhost http://localhost/apasaja
2. Buat lagi folder img di dalam folder apasaja http://localhost/apasaja/img untuk menyimpan gambarnya.
3. Download file jQuery dan jQueryForm lalu simpan di folder apasaja
3. Create file index.php di dalam folder apasaja.

<html>    <head>      <title>iBacor</title>      <style>        body {          background: #f1f1f1;          color: #999;          font-family:arial;          font-size:12px        }        #preview {          height: auto;          min-height:100px;          margin: 10px;          padding:10px;          background: #fff;        }        #preview img, #imageform{          width:100px;          height: 100px;          display: inline-block        }        #notip {          font-family: "Source Code Pro",Menlo,Consolas,Monaco,monospace;          color: #00E000;          background:#000;          margin:10px;          padding: 15px        }      </style>    </head>    <body>      <a href="http://ibacor.com/blog/jquery-ajax-php-image-upload-ala-facebook" target="_BLANK"><h3>Kembali ke tutorial</h3></a>      <div id='preview'>        <form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>          <input type="file" name="photoimg" id="photoimg"/>        </form>      </div>      <p align="center"><input type="submit" id="save" value="save" /></p>      <div id='notip'>>_</div>      <script type="text/javascript" src="jquery-2.1.4.min.js"></script>      <script type="text/javascript" src="jquery.form.js"></script>      <script type="text/javascript" >        $(document).ready(function() {          $('#photoimg').change(function() {            $("#imageform").ajaxForm(function(data){              tambah(data);            }).submit();                 });        });        function tambah(image){          $("#preview").prepend(image);          $('#notip').html('Menjalankan perintah:<br>move_uploaded_file($tmp_name, "img/$name");');          $('.hapus').click(function(){                         var gambar = $(this).attr('src'),                       gambarid = $(this).attr('id');            $.post("<?php echo "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";?>ajaximage.php", { hapus: gambar }).done(function(response) {              $('#'+gambarid).remove();              $('#notip').html(response);            });            return false;                     
         });          $('#save').click(function(){                     $('#notip').html('Menjalankan perintah:<br>');            $('.hapus').each(function(index, value) {                        $('#notip').append('Insert '+$(this).attr('src')+'<br>');            });               return false;                     
         });        }      </script>    </body> </html>
4. Create ajaximage.php di dalam folder apasaja.
<?php
   error_reporting(0);   
   // Format gambar yang di ijinkan untuk di upload
   $format_gambar = array("jpg", "png", "gif", "bmp");   
   // Folder untuk menyimpan gambar
   $folder = "img/";
   if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
   {   
     // Perintah untuk menghapus gambar
     if(!empty($_POST["hapus"])){
       unlink($_POST["hapus"]);
       echo 'Menjalankan perintah:<br>unlink('.$_POST["hapus"].')';
       exit;
     }else{
       $name = $_FILES['photoimg']['name'];
       $size = $_FILES['photoimg']['size'];         
       if(strlen($name))
       {   
         // Perintah untuk mengecek format gambar
         list($txt, $ext) = explode(".", $name);
         if(in_array($ext,$format_gambar))
         {   
           // Perintah untuk mengecek size file gambar
           if($size<(1024*1024))
           {   
             // Perintah untuk mengupload gambar dan memberi nama baru
             $gambarna = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
             $tmp = $_FILES['photoimg']['tmp_name'];
             if(move_uploaded_file($tmp, $folder.$gambarna))
             {   
               // Menentukan nama id img yang di ambil dari nama ifle gambar yang sudah terupload untuk selector hapus di jquery
               $id_gambar = explode(".", $gambarna);
               echo '<img src="'.$folder.$gambarna.'" class="hapus" id="'.$id_gambar[0].'" title="Klik gambar untuk di hapus"/>';
             }
             else{echo "Gagal";}
           }
           else{echo "Ukuran maksimal image 1 MB";   }         
         }
         else{echo "Format image tidak valid..";   }
       }         
       else{echo "Silahkan masukan image..!";   }       
       exit;
     }
   }
?>
Nah selesai juga :D sekarang kita coba buka di browser http://localhost/apasaja dan tadaaa ^^
Share on Google Plus

Related Post:

0 Komentar untuk "jQuery AJAX PHP image upload ala facebook"

Back To Top