Mengupload File dengan Uploadify JQuery Plugin

Contoh Kasus:

Lihat gambar dibawah ini dimana Project Creator kesulitan dalam menjalankan skrip uploadify sehingga dia meminta bantuan para freelancer.


Lihat demo dari uploadify pada website ini.

Pertanyaan:

Bagaimana Membuatnya … ?

Jawaban:

Ikuti langkah dibawah ini:

Mensetup Direktori Pengujian

Saya membuat direktori bernama testing dalam direktori htdocs sehingga untuk pemanggilan melalui browsernya adalah http://localhost/testing.

Downloadlah program uploadify dari http://www.uploadify.com/download/

Lalu extractlah file downloadan  tersebut disembarang tempat dan hasilnya akan terlihat seperti pada gambar dibawah ini:

Lalu ambillah semua file yang berada dalam direktori example dan masukkan ke folder htdocs/testing.

Dan sekarang isi folder dari htdocs/testing adalah seperti terlihat pada gambar dibawah ini:

Membuat Upload File dengan Satu File

Sekarang kita akan membuat penguploadan file yang pertama seperti terlihat pada gambar dibawah ini:

Untuk membuatnya maka buka file index.php lalu rubah kodenya menjadi berikut ini:
<html>
<head>
<title>Upload Dengan Satu File</title>
<link href=”css/uploadify.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”scripts/swfobject.js”></script>
<script type=”text/javascript” src=”scripts/jquery.uploadify.v2.1.0.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {

$(“#uploadify”).uploadify({

‘uploader’       : ‘scripts/uploadify.swf’,
‘script’         : ‘scripts/uploadify.php’,
‘cancelImg’      : ‘cancel.png’,
‘folder’         : ‘uploads’,

‘multi’          : false

});

});
</script>
</head>

<body>
<input type=”file” name=”uploadify” id=”uploadify” />
<p><a href=”javascript:jQuery(‘#uploadify’).uploadifyUpload()”>Uploads Files</a></p>
</body>
</html>

Sekarang coba kamu test di browser dengan alamat http://localhost/testing, apakah sudah berhasil … ?

Membuat Upload File dengan Multi File

Sekarang kita akan membuat penguploadan file yang kedua seperti terlihat pada gambar dibawah ini:

Untuk membuatnya maka buka file index.php lalu rubah kodenya menjadi berikut ini:
<html >
<head>
<title>Upload Dengan MultiFile</title>
<link href=”css/uploadify.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”scripts/swfobject.js”></script>
<script type=”text/javascript” src=”scripts/jquery.uploadify.v2.1.0.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {

$(“#uploadify”).uploadify({

‘uploader’       : ‘scripts/uploadify.swf’,
‘script’         : ‘scripts/uploadify.php’,
‘cancelImg’      : ‘cancel.png’,
‘folder’         : ‘uploads’,

‘multi’          : true

});

});
</script>
</head>

<body>
<input type=”file” name=”uploadify” id=”uploadify” />
<p><a href=”javascript:jQuery(‘#uploadify’).uploadifyUpload()”>Uploads Files</a>| <a href=”javascript:$(‘#uploadify’).uploadifyClearQueue();”>Clear Queue</a></p>
</body>
</html>

Sekarang coba kamu test di browser dengan alamat http://localhost/testing, apakah sudah berhasil … ?

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

1 Response

  1. Saryono says:

    Terima Kasih Fahmi Basya kartapura

Leave a Reply

Your email address will not be published. Required fields are marked *