Cara Membuat Proses Upload dengan PHP dan JQuery

Kali ini saya ingin berbagi tentang cara membuat Proses Upload atau yang lebih akrab disebut dengan Progress. Untuk Membuat Proses Upload File dengan PHP kita membutuhkan bantuan dari Javascript. Pada contoh ini kita akan mencoba menggunakan Library Javascript yaitu JQuery. anda dapat menggunakannya dan menyebarluaskan dengan bebas karena sifatnya yang free.   

Step Pertama adalah membuat sebuah halaman yang berisi form yang akan bertugas untuk melakukan upload file. Contoh Source code yang saya gunakan adalah sebagai berikut :
<h1>File Upload</h1>
    <form action="file.php" method="post" enctype="multipart/form-data">
        <input type="file" name="userfile"><br>
        <input type="submit" value="Upload File to Server">
    </form>

    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

    <div id="status"></div>

Code diatas akan menghasilkan sebuah form dimana aksi atau proses upload akan dilakukan oleh file berbeda yaitu file.php. sedangkan maksud dari tag div=status adalah untuk memberikan informasi tentang proses upload yang terjadi. Adapun source code file.php (yang akan menghandle proses upload ini) sebagai berikut.
<?php 
$upload_directory = "";
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $upload_directory . $_FILES['userfile']['name'])) {
print "";
print "Selamat, File Anda Berhasil Di Upload";
print "";
print "Nama File Yang Anda Upload {$_FILES['userfile']['name']} Ukuran File Anda {$_FILES['userfile']['size']} bytes ";
} else {
print "Mohon Maaf, File Anda Gagal Di Upload, Silakan Coba Lagi";
}
?>

Step Berikutnya. Silahkan copy dan simpan library Jquery disini.  lalu copy juga library tambahan disini lalu simpan dengan ekstensi (*.js). Setelah semua anda simpan dalam directory projek anda. anda perlu memanggil filenya didalam file form input yang dibuat pada step 1 
<script src="jquery.js"></script>
<script src="js.js"></script>

Langkah Terakhir adalah menggunakan library yang sudah kita tambahkan pada step diatas. karena ini adalah javascript kita perlu membuat sebuah baris code yang diapit dengan tag script. listing code selengkapnya seperti berikut :
<script>
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
        //console.log(percentVal, position, total);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 
})();       
</script>

Cara Membuat Proses Upload dengan PHP dan JQuery
Setelah semua proses diatas dilakukan. coba jalankan script anda dengan membuka localhost/namafolderprojek di browser anda. Selamat mencoba dan semoga berhasil. Jika anda membutuhkan source code lengkapnya dapat anda download disini.
Happy Coding :)

Share this

Related Posts

Previous
Next Post »

5 comments

comments
28 January 2016 at 12:57 delete

Thanks BERAT mas gan, akhirnya selesai juga pencarian saya//
ada juga yg ngirim datanya dari php, klo dari ajax saya masih pemula soalnya//
#sekali lagi THANKS gan (y)

Reply
avatar
4 July 2016 at 00:47 delete

Mas, linknya kok nggak bisa ya? bisa minta tolong filenya kirim ke email saya ardianasti@gmail.com, thanks

Reply
avatar
17 November 2016 at 14:59 delete

Maaf Mas, Linknya expired kayanya. Bisa minta upload ulang Mas atau minta tolong di email ke saya mardino.ismail21@gmail.com

Reply
avatar
17 November 2016 at 15:01 delete

Maaf Mas, Linknya expired kayanya. Bisa minta upload ulang Mas atau minta tolong di email ke saya mardino.ismail21@gmail.com

Reply
avatar
27 November 2016 at 00:00 delete

keren blognya gan, Bisa lebih keren kalau ada input datepicker & Image satu form menggunakan Ajax & PHP, Ditunggu yaa

Reply
avatar

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.