All About My Life and My.....: Uploading Asynchronous Using YUI

Setelah lama bergelut dan sibuk dengan KKN kalau dikampusku namanya KP alias Kerja Praktek aku menemukan cara mengupload file dengan ajax. Yang aku gunakan yaitu XHR alias XMLHttpRequest dengan Library Yahoo User Interface (YUI). Aku menemukan di suatu blog kalau mengupload file yaitu dengan membuat XHR meng-connect formnya dan mengubah parameter success didalamnya menjadi upload. Beda dengan ajax biasanya yang menggunakan success. Ini bagi yang biasa menggunakan YUI loh….

Sip mari kita mulai aja tutorialnya…

File yang pertama upload.html

Yang pertama konekkan dulu File JS nya

Setelah itu buat script javascriptnya

Function UploadYUI(){

function makeRequest(){

var div = document.getElementById('container');

var handleSuccess = function(o){

if(o.responseText !== undefined){

div.innerHTML = o.responseText;

}

};

var handleFailure = function(o){

if(o.responseText !== undefined){

div.innerHTML += "

Status code message: " + o.statusText ;

}

};

var callback =

{

upload:handleSuccess,

failure:handleFailure

};

YAHOO.util.Connect.setForm('form1', true);

var sUrl = "upload2.php";

var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback);

}

Bagian yang aku tebalin itulah kunci dalam mengubah post dan get ajax di YUI menjadi upload. Selain itu juga kita harus mengkoneksikan form dengan YUI menjadi true ini supaya enctype kita bisa dibaca. Dengan mengkoneksi form dengan YUI berarti kita memberi informasi tambahan ke YUI bahwa ajax yang digunakan untuk mengupload….

Sip setelah membuat javascriptnya sekarang kita buat formnya.

Kalau dilihat dari javascriptnya karena mendefinisikan variabel dengan object maka disarankan untuk menuliskan javascriptnya dibagian akhir.
Oke lengkapnya file upload.htm

<br /><title>Untitled Document</title><br /><br /><link rel="stylesheet" type="text/css" href="lib/YahooUI/fonts/fonts-min.css"><br /><script type="text/javascript" src="lib/YahooUI/yahoo/yahoo-min.js"></script><br /><script type="text/javascript" src="lib/YahooUI/event/event-min.js"></script><br /><script type="text/javascript" src="lib/YahooUI/connection/connection-min.js"></script><br /><body><br /><br /><div id="container"></div><br /><form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"><br />  File : <input type="file" name="filenya" id="filenya]"><br />  <br /><br />  <label><br />  <input type="button" name="button" id="button" value="Submit" onclick="makeRequest();"><br />  </label><br /></form><br /><script> <br /><br />function makeRequest(){<br />    <br />	<br />	var div = document.getElementById('container');<br /><br />    var handleSuccess = function(o){<br />	 if(o.responseText !== undefined){<br />	  div.innerHTML = o.responseText;	<br />	}<br />};<br /><br />var handleFailure = function(o){<br />	if(o.responseText !== undefined){<br />		div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";<br />		div.innerHTML += "<li>HTTP status: " + o.status + "</li>";<br />		div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";<br />	}<br />};<br /><br />var callback =<br />{<br />  upload:handleSuccess,<br />  failure:handleFailure<br />};<br />YAHOO.util.Connect.setForm('form1', true);<br />var sUrl = "upload2.php";<br />	var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback);<br />	<br />	<br /><br />}<br /><br /><br /></script><br /></body><br /></html><br /><br />

Oke sekarang kita membuat file untuk menerima hasil kiriman filenya ke server. Aku biasa gunakan PHP. Sip ayo kita mulai

upload2.php

print_r($_FILES);

?>

Kok singkat banget?? Ya iyalah masa iya donk sich?? Hehe…. File upload2.php hanya aku gunakan untuk melihat apakah filenya diterima server secara asynchronous dan ternyata ini berhasil ni buktinya

Bisa dilihat kalau server memberikan respon filenya diterima…

Sekian deh,selamat mencoba...

Oia aku ada masalah dalam mengupload YUI dengan multiple jika aku gunakan satu form untuk banyak file. Tapi kalau satu form untuk satu file aja seh lancar2 aja....

Makasih uda mau baca blog aku...

All About My Life and My.....

Sabtu, 14 Juni 2008

Uploading Asynchronous Using YUI

Tidak ada komentar:

Arsip Blog