Skrip Upload File Tanpa Reload Halaman (PHP-jQuery)

642

Dengan alasan demi ‘keamanan’, 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 contoh aplikasi sederhana dari plugin iframe-post-form yang akan digunakan untuk meng-upload file gambar (*gif, *jpg, *png atau *jpeg). Proses upload dapat berlangsung tanpa harus me-reload seluruh isi halaman. Skrip dilengkapi dengan simple modal jquery.simplemodal.js untuk menampilkan animasi uploading sebagai tanda bahwa proses upload sedang berlangsung. Form upload dan hasil upload akan ditampilkan seperti ini:

upload-tanpa-reload

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

//Potongan Skrip

<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);
}
});

Skrip selengkapnya dapat anda download disini

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

-Selamat Mencoba-

  • 3

    tq

  • pangeran kuda

    mantap udah cari-cari di rumahnya mbah google malah ketemu disini thanks a lot