Source Code Membuat Upload File Tanpa Reload Halaman dengan PHP jQuery

Halo sahabat belajar pintar php, pada malam yang istimewa ini tepat pada tanggal 12 bulan 12 tahun 2012 dan jam 12 malam juga, saya ingin membagikan kepada sahabat sekalian postingan yang istimewa juga yaitu skrip php untuk upload file tanpa reload halaman, dan tentunya disini kita harus menggunakan bantuan jquery. Kenapa harus bantuan jquery ? tentu ada salah satu dari sahabat sekalian yang bertanya demikian, jawabannya sih simpel aja, jquery itu bekerja di balik server, sebagai contoh seperti siaran televisi, kita bisa menonton siaran non stop 24 jam tanpa henti, benarkan, tapi anda tahu gak dibalik itu semua kan ada para karyawan atau pekerja yang bekerja dibalik itu semua pada instansi penyiaran itu, hal ini agak mirip dengan jquery, seperti sama halnya dengan twiter, berita terbarunya atau twit orang2 yang anda follow kan otomatis bertambah atau bermunculan satu demi satu tanpa kita harus me reload browser kita, itu lah kerjaan atau tugas si jquery kita ini, dialah bekerja dibalik ini semua hingga kita tidak perlu mereload halaman browser kita. Sampai disini sahabat setia belajar pintar php sudah paham kan. Oke kalau gitu mari kita ke TKP ..!!!

Sahabat semua demi keamanan web jQuery tidak mengizinkan men-submit form yang memiliki enctype multipart/form-data secara langsung dengan menggunakan Ajax Post nantinya, $_FILES tidak akan  dikenali.  Sebagai penggantinya jQuery menyediakan plugin jquery.iframe-post-form.js

Berikut saya berikan contoh aplikasi sederhana dari pluginiframe-post-form yang akan digunakan untuk meng-upload file gambar (*gif, *jpg, *png atau *jpeg). Proses upload dapat berlangsung tanpa harus me-reload halaman browser anda . karena pada skrip dilengkapi dengan simple modal jquery.simplemodal.js untuk menampilkan animasi uploading sebagai tanda bahwa proses upload sedang berlangsung. mirip seperti kita mengupload foto di facebook. Form upload dan hasil upload akan ditampilkan seperti gambar dibawah ini:

Upload akan berlangsung saat nilai fupload (Pilih File yang akan di upload) berubah.

berikut saya tampilkan potongan skripnya.

<script src=”js/jquery-1.3.2.js”></script>
<script src=”js/jquery.iframe-post-form.js”></script>
<script src=”js/jquery.simplemodal.js”></script>
<script src=”js/mgupload.js”></script>
…
$(’#fupload’).change(function(){
$(’#form-upload’).submit();
});
$(’#form-upload’).iframePostForm ({
post : function (){
$(’#uploading’).modal();
},
complete : function (result){
$.modal.close();
$(”#up-result”).html(result);
}
});

Sahabat Belajar Pintar PHP dapat mendownload skrip lengkapnya  di sini

Jika anda sudah selesai mendownload skripnya, anda yang pengen berkreasi sendiri dapat merombak atau memodifikasi skripnya pada tanda yang diberikan di dalam kodingnya.

Untuk memodifiksi skrip dapat anda lihat  kode ‘<!–MODIFIKASI SKRIP MULAI DISINI’ pada skrip halaman index.php

Sekian tutorial membuat aplikasi upload file tanpa reload dari saya, selamat mencoba.