Upload foto dg kompresi di klient (PHP) bagian 2

Coding Upload foto dg kompresi di klient menggunakan PHP

Mohon maaf saya lupa referensi yang sudah saya pergunakan agar modul ini bisa jadi, tapi saya tidak membuang syntax asli sebelum di modif, hanya di rem saja. Jaga jaga ada kebutuhan custom yg berbeda dengan yang saya miliki.


BUAT LAH FORM SELECT FILE SEDERHANA

code nya seperti ini:


<h2>Langkah 1. Klik "Choose File" untuk pilih gambar jpg atau langsung foto <br></h2>
     
<form action="" method="post" enctype="multipart/form-data" id="something" class="uniForm" runat="server"  onsubmit="ShowLoading()"> 
<input name="new_image" id="new_image" size="30" type="file" class="fileUpload" /> <br /><br /><br /><br /><br /><br />
  <h2>Langkah 2. Klik SAVE IMAGE <br></h2>
    <button name="submit" type="submit" class="submitButton">Upload / Save Image</button>
  </form>

 

 

note:

• Intinya kita bikin sebuah form standard dengan input type nya file.
• Enaknya bila menggunakan mobile, pilih file akan membuat popup feature selain pilih file. kita bisa menggunakan kamera secara langsung.
• Action nya ada atribut form
• saya tambahkan loading gif image sebagai indikator, biar terlihat progressnya.
• Submitnya ke file ini juga tapi saya bikin seleksi kondisi sebelum submit atau sesudah submit (males kebanyakan file)

BIKIN LOADING ANIMASI

Problema user experience ketika ada upload gambar adalah tidak aware adanya proses uploading yang menyita waktu dan bandwith lebih lama dari sebelumnya. mereka sering refresh page, maka proses akan kacau bola ini terjadi. Maka loading progress sangat di butuhkan.

codenya seperti ini :


<script type="text/javascript">
    function ShowLoading(e) {
        var div = document.createElement('div');
        var img = document.createElement('img');
        img.src = 'image/loading_bar.gif';
        div.innerHTML = "Loading...<br />";
        div.style.cssText = 'position: fixed; top: 160; left: 42%; z-index: 5000; width: 202px; text-align: center; background: #EDDBB0; border: 1px solid #000';
        div.appendChild(img);
        document.body.appendChild(div);
        return true;
   }
</script>


note:

• Taruh di paling atas file landing biar langsung terbaca
• Masalah coding saya masih tumplex blex dari copas annya
• Masalah tampilan edit saja di div.style.cssText
• Gif nya saya buat sendiri pakai flash.

BUAT LANDING PAGE (DIFILE TERSEBUT SENDIRI JG TIDAK PAPA)

codenya seperti ini :


<p>
  <?
      $myFile = $_FILES["new_image"];

      if (isset ($_FILES['new_image'])){
          $imagename = $_FILES['new_image']['name'];
          $source = $_FILES['new_image']['tmp_name'];
          $target = "".$imagename;
        //  move_uploaded_file($source, $target);
          $imagepath = $imagename;
          $save = "upload/" . $imagepath; //This is the new file you saving
           // $file = $imagepath; //This is the original file di hp
          list($width, $height) = getimagesize($source) ;
          $tn = imagecreatetruecolor($width, $height) ;
          $image = imagecreatefromjpeg($source) ;
 //   $image = imagecreatefromjpeg($file) ;
          //  imagecopyresampled($tn, $image, 0, 0, 0, 0, $width, $height, $width, $height) ;
          //  imagejpeg($tn, $save, 70) ;
          $save = "upload/" . $imagepath; //This is the new file you saving
          //  $file = "upload/" . $imagepath; //This is the original file
          // list($width, $height) = getimagesize($file) ;
          list($width, $height) = getimagesize($source) ;
    if ( $width >=1024)
    { $modwidth = 1024; }
    else
    { $modwidth = $width; }
              //$modwidth = $width/2;
          $diff = $width / $modwidth;
         // $modheight = 185;
          $modheight = $height/$diff;
          $tn = imagecreatetruecolor($modwidth, $modheight) ;
          //  $image = imagecreatefromjpeg($file) ;
          $image = imagecreatefromjpeg($source) ;
           // $image = imagecreatefromjpeg($save) ;
          imagecopyresampled($tn, $image, 0, 0, 0, 0, $modwidth, $modheight, $width, $height) ;
          imagejpeg($tn, $save, 70) ;
          //echo "Large image: <img src='upload/".$imagepath."'><br>";
   //echo $imagepath;
        echo "<img src='upload/".$imagepath."'>";
      }
?>
</p>


note:

• Syntax ajaib buat kompres file dahulu baru di upload
• Syntax asli yang saya modif saya rem //
• Saya membuat semua gambar menjadi width 1024, dan height nya proporsional seperti sebelumnya
• Kompresi file atau resolusinya 70% dari aslinya
• Sisanya di sesuaikan dengan kebutuhan
• Dan syntax langsung naikkan file ke internet
• Jangan lupa chmod folder yang di tuju
• Lihat comment di belakang rem // untuk penjelasan

Kayaknya semua jelas yah….
Tinggal tambahkan fungsi apa lagi yang di kehendaki sebagai pelengkap. Tambahan yang saya tambahkan adalah:

• Menyimpan nama file ke data base untuk di panggil lagi di querynya
• File kompresi ini hanya berlaku untuk jpg, bmp dan gif non ani, bila mau melakukan handling dari file ini bisa saja di lakukan, tapi karena ini hanya prototype dan pakai kamer, jadi jpg sudah cukup
• Sample foto seblum upload adalah 4 MB an, setelah naik ke internet sebesar 100kb an (sangat significan)

Kayak nya cukup untuk sekarang cara untuk kompresi file sebelum di upload yah…

next post all syntax buat yg mau copas

untuk melihat kajian dan analisa klik here