Sesuai permintaan dari Pengunjung Web Setia yang meminta untuk share mengenai Upload Images menggunakan Teknik Ajax.. kali ini penulis akan membahas mengenai teknik tersebut.. apa sih yang dimaksud mengenai Ajax??.. Ajax merupakan suatu teknik bahkan mungkin saat ini sudah menjadi teknik wajib yang harus digunakan dalam membangun suatu website Modern (Web 2.0).. Mengapa?.. karena dengan Ajax, segala permintaan (request) akan terjadi di belakang layar, dimana seluruh aksi akan secara responsif dilakukan, tanpa harus me-load web browser, terlebih lagi itu adalah Upload Gambar, dimana jika kita memasukkan data yang memiliki FileSize cukup besar, akan semakin lambat bukan?.. untuk itu ini dia solusinya..
Buat Form dengan nama form_upload.php, isinya sebagai berikut:
<span style="font-family: courier new,courier;"><!-- Form Upload -->
<iframe id="upload-frame" name="upload-frame" style="display:none;"></iframe> </span>
<form action="upload.php" enctype="multipart/form-data" method="post" name="formupload" onsubmit="startUpload();" target="upload-frame">
Picture : <input name="picture" type="file" /><input name="upload" type="submit" value="Upload" /> </form><br />
<br />
<!-- Tampilkan Gambar -->
<div id="uploaded-picture"> </div> <br />
<br />
<!-- Load jQuery.js --><br />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!-- Start Upload -->
function startUpload(){
$("#uploaded-picture").html("loading...");
}
function displayPicture(pictureUrl){
var img = new Image();
$(img).load(function(){
$(this).hide();
$("#uploaded-picture").html($(this));
$(this).fadeIn();
}).attr('src', pictureUrl).error(function(){
alert("gagal menampilkan gambar");
});
</script>
Buat file upload.php (sebagai aksi proses), isinya sebagai berikut:
<?php
$fileName = $_FILES[‘picture’][‘name’];
$fileSize = $_FILES[‘picture’][‘size’];
$fileError = $_FILES[‘picture’][‘error’];
$success = false;if($fileSize > 0 || $fileError == 0){
$move = move_uploaded_file($_FILES[‘picture’][‘tmp_name’], “images/“.$fileName); //Simpan ke folder images
if($move){
$success = true;
}
}
echo “<script type=‘text/javascript’>
if($success){
echo "parent.displayPicture('images/$fileName');";
}
else{
echo "alert('Upload gagal $fileError');";
}
</script>”;
Langkah terakhir, buat folder images untuk menampung file-file gambar yang di-upload and jangan lupa untuk me-load file JavaScript jquery.js.. btw, file JavaScript nya dimana?.. untuk lebih mudah dan singkat, seluruh Source nya telah penulis sertakan.. dapat Anda download di http://www.ziddu.com/download/17869730/UploadMenggunakanAjax.rar.html
Semoga tutorial ini dapat memberikan manfaat yang sebesar-besarnya bagi Anda.
edi
mantab.. ini dia yg dicari-cari. thx mas agus.. tutorial dan buku2 nya sangat bermanfaat..
izar
thanks bro.... mas agus ceritain dikit dong alur scriptnye, makasih
idham
Thank sangat bermanfaat.
Agus Saputra
edi & idham @ mantab...
izar @ alurnya sbb:
pertama,
yang jelas menampilkan form terlebih dahulu
<form onsubmit="startUpload();" action=upload.php> = function startUpload()
jadi ketika form tersebut kita klik (submit), maka function startUpload akan bekerja, dimana didalamnya ada kalimat "Loading"..
untuk perintah displayPicture, digunakan untuk menampilkan gambar yang telah di-upload.
pada upload.php (proses aksi)..
$_FILES['picture']xx = merupakan parameter untuk upload file.
if($fileSize > 0 = jika file size nya lebih dari 0, maka akan dilakukan pemindahan (move_uploaded_file..
nah, skrip dibawahnya (javascript),
jika upload selesai, maka gambar akan langsung ditampilkan, namun jika gagal akan ditampilkan pesan "Upload gagal xx"..
lahas
Mas Agus matur nuwun pituduh-e,,
kalo bisa ditambah lagi,, upload file pake ajax,, nyimpen nya jangan di file system,, tapi database,, pake tipe blob,, yang mirip gmail attachment itu mas,,
aku nyari gak ketemu-ketemu,,
:-)
Agus Saputra
lahas @ oce mas.. saya tampung dulu yah .. ^^
Novian Agung
Mana pemanggilan fungsi ajax-nya om? Itu kan cuma pakai iframe dan JQuery hanya difungsikan sebagai pemanggil link gambar untuk ditampilkan.
Begini seharusnya ajax: http://www.diajar.com/membuat-pengunggah-uploader/
AJUN
Mas Agus, bagaimana jika saya hanya ingin menampilkan tidak gambarnya saja, tapi keterangan nama file yang saya upload.
Terimakasih
Ahndan
@lahas : Kalo yg pakai tipe BLOB kaya gini :
1. Buat file form_upload.php :
<form enctype="multipart/form-data" action="upload_gambar.php" method="post">
Nama Image <input name="title" type="text" /><p>
Pilih Image <input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
<input name="image" type="file" />
<p><input type="submit" name="submit" value="Submit" />
</form>
2.Lalu file upload.php
<?php
$tmpName = $_FILES['image']['tmp_name'];
$title = $_POST['title'];
$fp = fopen($tmpName, 'r');
$dataimage = fread($fp, filesize($tmpName));
$dataimage = addslashes($dataimage);
fclose($fp);
// koneksi ke dalam database
mysql_connect('localhost',' ;root','');
mysql_select_db(' db_gambar');
//menyimpan ke dalam db
$query = "INSERT INTO image(title, image) VALUES ('$title', '$dataimage')";
$hasil = mysql_query($query);
if ($hasil) echo "Berhasil Di Upload";
else echo "Gagal! Coba Lagi";
?>
3. Untuk struktur data di mysql :
A. Nama DB : db_gambar
B. create table image (
id int(11) auto_increment primary key,
title varchar(40) not null,
image longblob not null
);
Mudah2an membantu semua
Reza
kalau menampilkan gambar dengan slide show, kemudian gambar didalam slide show itu bisa dihapus, gimana cara bkinnya mas agus,,
herwin
hadeh dah lama ditunggu akhirnya ketemu juga script na, thanks mas agus. piye kabare mas agus..??
baba
bababababababababbababaabab
baba
babibubebobabonba
panji
terimakasih mas...
Dannie
Gan kalo mau ngatus ukuran gambar yang tampil gimana..?
itu kan setelah terupload, gmabar langsung ditampilkan. Nah, kalo gambarnya berukuran 1000x1000 misalnya yg nongol ya gede banget gan..
Gimana biar gambarnya bisa diatus ukuran tampilnya gan?
Obat herbal asma
artikel bermanfaat dan menarik sekali
http://obatherbalasmagoldg.wordpress.com
Chimikofu
Gak ada demo nya ya gan?
Thank's
Agus Saputra
Chimikufu @ Kan sudah saya sediakan link download nya diatas?.. :)
Distributor Area
Terima kasih atas infonya
Kunjungi web ane ya www.haloniaga.com dan www.distributorarea.com
robhi.dj@gmail.com
Gan bagus nih, tapi ane cob kok notice:
Notice: Undefined index: picture in C:\xampp\htdocs\upload\upload.php on line 2
Notice: Undefined index: picture in C:\xampp\htdocs\upload\upload.php on line 3
Notice: Undefined index: picture in C:\xampp\htdocs\upload\upload.php on line 4
Notice: Undefined index: picture in C:\xampp\htdocs\upload\upload.php on line 8
dany
maaf pa , kalo mau upload sama nampilinya pake smarty php gmna caranya , sama ajah ga? terima kasih