Upload File dengan Metode AJAX

Ukuran: px

Mulai penontonan dengan halaman:

Download "Upload File dengan Metode AJAX"

Agus Jayadi
6 tahun lalu
Tontonan:

Upload File dengan Metode AJAX Oleh: Cecep Yusuf Saya akan membahas bagaimana membuat form upload file beserta prosesnya dengan menggunakan teknik AJAX memakai library Ajax File Upload, salah satu

2 Upload File dengan Metode AJAX Oleh: Cecep Yusuf Saya akan membahas bagaimana membuat form upload file beserta prosesnya dengan menggunakan teknik AJAX memakai library Ajax File Upload, salah satu library jquery. DOWNLOAD FILE TUTORIAL DI SINI Selamat malam sahabat Jaco, malam ini saya akan membahas bagaimana membuat form upload file beserta prosesnya dengan menggunakan teknik AJAX. Kalo sahabat Jaco belum mengetahui apa itu Ajax, silakan pelajari tutorial ini untuk dipelajari dasar-dasar menggunakan AJAX dengan menggunakan jquery, yang merupakan salah satu framework javascript yang populer. Sewaktu-waktu kita pasti membutuhkan yang namanya upload file dengan teknik AJAX, karena kebetulan variable $_FILES sendiri secara default sebenarnya tidak bisa diproses menggunakan HTTP Request, maka dari itu kita akan menggunakan library jquery sehingga kita tidak perlu repot-repot membuat kode dari awal (zero code). Di sini dibagi 2 penjelasan untuk masing-masing lingkup kode, yaitu kode untuk sisi client (HTML+JS) dan kode untuk sisi server (PHP). Sisi Client AJAX secara default tidak dapat mengirimkan variable $_FILES melalui HTTP Request, oleh karena itu kita akan menggunakan library jquery bernama AJAX File Upload Plugin. Library ini akan mensimulasikan Ajax melalui iframe, sehingga pengiriman variable $_FILES dapat dilakukan. Prinsip yang dipakai sangat sederhana, yaitu pertama kita panggil kode pada server yang berfungsi untuk menangani proses upload menggunakan teknik AJAX. Selama proses upload tersebut berlangsung kita tampilkan indikator atau pesan tertentu kepada user. Server akan memberikan tanggapan berupa dokumen JSON yang berisi status berhasil atau tidaknya proses upload tersebut. Jika berhasil, server akan mengirimkan informasi tentang file yang telah di-upload tersebut dan selanjutnya kita tampilkan hasilnya, apakah file berhasil diupload atau tidak. Buatlah sebuah file html, misalnya index.html di dalam sebuah folder, kemudian jangan lupa masukkan di dalam folder tersebut file jquery beserta file ajaxfileupload.js. Di dalam file index.html (file client) kita akan buat sebuah file input dan tombol submit, seperti berikut ini:

3 <form id="frm" enctype="multipart/form-data" method="post"> File <input id="file_input" type="file" name="file_input"> <input type="submit" value="upload"> </form> Setelah itu, mari kita buat html untuk menampilkan hasil upload berupa nama file (filename, type, dan ukuran file), buat di bawah form tersebut: <div id="pesan" style="display: none">silakan tunggu...</div> <div id="result"> <table> <tr> <td>nama file</td> <td id="filename"></td> </tr> <tr> <td>ukuran</td> <td id="size"></td> </tr> <tr> <td>type</td> <td id="type">type</td> </tr> </table> </div> Kemudian, tambahkan javascript di dalam tag <head> seperti berikut: <script type="text/javascript"> $(function(){ $("#frm").submit(function(){ $("#pesan").ajaxstart(function(){ $(this).show(); }).ajaxcomplete(function(){ $(this).hide(); }); $.ajaxfileupload({ url: "upload.php", secureuri: false, fileelementid: "file_input", datatype: "json", success: function (json, status){ if(json.status==1){ $('td#filename').html(json.filename); $('td#size').html(json.size); $('td#type').html(json.type); }else{ alert('upload GAGAL!'); }

4 }); }); </script> } }); return false; Akan saya jelaskan arti javascript di atas :) Pertama, ketika form dengan id frm disubmit, maka akan melakukan perintah ini: Ketika memulai proses ajax, elemen dengan id pesan akan ditampilkan, akan menampilkan pesan Silakan tunggu... $.ajaxfileupload adalah perintah dari library Ajax File Upload url adalah alamat file yang berada di sisi server (php) fileelementid adalah id dari input form file datatype adalah type data yang akan dijadikan response, bisa json atau xml, di sini kita menggunakan json yang ada di dalam parameter success adalah perintah yang akan dijalankan ketika uploading dari sisi server selesai dijalankan Sekarang kita akan membuat untuk sisi server, proses uploading dengan PHP :) Sisi Server Buatlah file PHP sebagai server side, beri nama upload.php dan simpan di dalam satu folder dengan file HTML di atas. Untuk mengupload file, kita akan menggunakan PHP native code, yaitu move_uploaded_file, adapun kode lengkapnya adalah: <?php if ($_FILES) { $tmp = $_FILES['file_input']['tmp_name']; $type = $_FILES['file_input']['type']; $size = $_FILES['file_input']['size']; $filename = $_FILES['file_input']['name']; $path = pathinfo($_server['php_self']); $destination = $path['dirname']. '/'. $filename; if (move_uploaded_file($tmp, $_SERVER['DOCUMENT_ROOT']. $destination)) $status = 1; else $status = 2; $hasil = array( 'status' => $status, 'filename' => $filename, 'type' => $type, 'size' => $size,

5 }?> ); echo json_encode($hasil); Penjelasan dari kode di atas adalah: Masing2 metadata dari input type file bernama file_input dimasukkan ke setiap variable, seperti tmp, type, size, dan filename Jika sudah diupload file tmp ke destination yang ditentukan (tempat upload, di sini adalah root), maka set status menjadi 1, jika tidak, maka set status menjadi 2 Sekarang hasil upload kita masukkan ke dalam variable array bernama $hasil. Di sini variable $hasil dengan struktur array php akan diubah menjadi json dengan menggunakan function json_encode($hasil), akan terbentuk json seperti berikut ini (walaupun tidak terlihat): [{ 'status': '1', 'filename': 'jagocoding.jpg', 'type': '189637', 'type': 'image/jpeg' }] Tutorial selesai, selamat mencoba :) DOWNLOAD FILE TUTORIAL DI SINI ~ cheyuz@jagocoding.com Stand By With Me, cheyuz@jagocoding.com Tentang Penulis

7 Cecep Yusuf Hi, my name is Cecep Yusuf. However, in the virtual world I am more likely to use the name Cheyuz, which is an abbreviation of two words "Cecep" and "Yusuf". I am founder of Jagocoding.com, u can view more of me in Cheyuz.com

dokumen-dokumen yang mirip

AJAX dengan jquery Part 2

AJAX dengan jquery Part 2 Oleh: Cecep Yusuf Kita akan belajar bagaimana cara membuat AJAX dengan response data HTML memakai metode GET dan dimasukkan ke dalam elemen yang ditentukan pada halaman utama.