Sunday, March 6, 2016

Kategori: ,

Progres Bar Upload Image Dengan HTML5, PHP Dan Ajax

html tutorial


Tobi Web ID Tempatnya Cari Source Code Toko Online, Source Code Aplikasi PHP, Berbasis PHP dan MySQl, Source code CodeIgniter, Pengelolaan Data dengan Codeigniter, Contoh Program dengan PHP, Source Code eCommerce, Source Code dengan Laravel, cek source code website, source code toko online, source code toko online dengan php mysql
Ilustrasi gambar dari www.citrik.com

Pada postingan di pagi hari ini, saya akan membahas bagaimana membuat progres bar upload image menggunakan HTML5, PHP dan AJAX. Cara kerjanya ialah sama seperti Upload Image pada Umumnya, namun yang membedakan ialah nantinya terdapat progres atau presentasi uploadnya. Dengan adanya fitur ini tentu dapat mempercantik sobat semua dalam membuat tampilan website atau aplikasi sobat.

Konsep dari cript ini ialah dengan menghitung besar file yang akan diupload, lalu hasil ukuran file tersebut dimasukan ke dalam progres bar,

Ok, Selanjutnya kita buat form uploadnya terlebih dahulu.


<!DOCTYPE html>
<html>
<head>
<script>

function uploadFile() {
    // membaca data file yg akan diupload, dari komponen 'fileku'
    var file = document.getElementById("fileku").files[0];
    var formdata = new FormData();
    formdata.append("datafile", file);

    // proses upload via AJAX disubmit ke 'upload.php'
    // selama proses upload, akan menjalankan progressHandler()
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.open("POST", "upload.php", true);
    ajax.send(formdata);
}

function progressHandler(event){
    // hitung prosentase
    var percent = (event.loaded / event.total) * 100;
    // menampilkan prosentase ke komponen id 'progressBar'
    document.getElementById("progressBar").value = Math.round(percent);
    // menampilkan prosentase ke komponen id 'status'
    document.getElementById("status").innerHTML = Math.round(percent)+"% telah terupload";
    // menampilkan file size yg tlh terupload dan totalnya ke komponen id 'total'
    document.getElementById("total").innerHTML = "Telah terupload "+event.loaded+" bytes dari "+event.total;
}

</script>
</head>
<body>
<h2> HTML5 Upload File</h2>
<form id="upload_form" enctype="multipart/form-data">
   <input type="file" name="datafile" id="fileku"><br>
   <input type="button" value="Upload File" onclick="uploadFile()">
   <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
   <h3 id="status"></h3>
   <p id="total"></p>
</form>
</body>
</html>

Pada script diatas terdapat komponen tag sebagai berikut 


<progress id="progressBar" value="0" max="100"></progress>

Komponen tersebut ialah kompunen tag yang akan dikenal oleh HTML5.
Adapun komponen <h3 id="status"></h3> nantinya akan digunakan untuk menampilkan status upload file yang berupa prosentase dalam angka besarnya file size yang telah terupload. Sedangkan komponen <p> id="total"</p> nantinya digunakan untuk menampilkan filesize yang sudah terupload dari total filesizenya.

Apabila tombol upload diclick, maka akan menjalankan function ‘uploadFile()‘ function ini ialah terletak pada file upload.php sebagaimana tersaji dalam script di atas untuk proses upload file yang diarahkan ke file upload.php namun dijalankan via AJAX.


Selanjutnya kita buat file upload.php nya, yaitu script yang akan mengirim file ke folder penyimpanan.

<?php
// baca nama file
$fileName = $_FILES["datafile"]["name"];
// baca file temporary upload
$fileTemp = $_FILES["datafile"]["tmp_name"];
// baca tipe file
$fileType = $_FILES["datafile"]["type"];
// baca filesize
$fileSize = $_FILES["datafile"]["size"];

// proses upload file ke folder /upload
if (move_uploaded_file($fileTemp, 'upload/'.$fileName)){
    echo "Upload $fileName selesai";
}
?>

Pastikan bahwa sobat membuat lokasi file akan diupload,yaitu buatlah folder dan simpan file upload ke dalam folder /upload jadi pastikan sebelum Anda mencoba scriptnya, sudah dibuat folder ‘upload’ terlebih dahulu. Folder /upload dijadikan satu dengan script diatas agas prosesnya sama.

Sekian Postingan pada kali ini, semoga bisa bermanfaat, terima kasih telah berkunjung.

Sumber referensi dari = blog.rosihanari.php

Tobi Muhammad

Author & Editor

Tobi (Muhammad Tobi) adalah seorang Tukang Masak di perusahaan startup, suka sekali menulis dan mempelajari source code open source lisensi GNU di Github dll. Bisa pemrogramman web karena sering belajar dari contoh program yang ada di Github dll. Anak desa yang hanya lulusan Paket C.

0 comments:

Post a Comment

 

News Letters

Subscribe here to get our newsletter in your inbox, it is safe and EASY!

Tobi Web Indonesia