Ajax PHP : Tutorial Cara Upload Gambar Dengan AJAX PHP

Di Tulis Oleh : Ivan Silalahi 2 comments
" BANTU SUBSCRIBE CHANNEL YOUTUBE SAYA, AGAR SAYA MEMBUAT VIDEO TUTORIAL SETIAP POSTINGAN BLOG INI DAN MASIH BANYAK LAGI YANG BISA SAYA BAGIKAN UNTUK SOBAT-SOBAT SEKALIAN. TERIMAKASIH SEBELUMNYA "



Sebenarnya hal ini tidak beda jauh dengan cara mengupload foto dengan PHP, hanya saja dengan menggunakan ajax, maka cara kerjanya lebih cepat dan dinamis.
Tutorial Cara Upload Gambar dengan AJAX PHP akan menggunakan cara yang sama dengan yang digunakan di tutorial tersebut, ditambahan sedikit trik dan javascript. Untuk meng-upload gambar dengan AJAX diperlukan bantuan  <iframe>. Di tutorial upload gambar dengan PHP digunakan html form seperti di bawah:

<!--form to upload file-->
<form name="formupload" method="post" enctype="multipart/form-data" action="script/to/upload/file.php">
Picture : <input name="picture" type="file" />     
<input type="submit" name="upload" value="Upload" />
</form>


Perlu sedikit perubahan di html form yang digunakan untuk mengupload file seperti berikut:



<iframe name="upload-frame" id="upload-frame" style="display:none;">
</iframe>  
<form name="formupload" method="post" enctype="multipart/form-data" action="upload.php"  target="upload-frame" onsubmit="startUpload();"> 
Picture : <input name="picture" type="file" />
<input type="submit" name="upload" value="Upload" />
</form>
<div id="uploaded-picture">
<!-- div tempat photo yang telah diupload ditampilkan -->
</div>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
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>  


Di baris 1 ditambahkan html tag <iframe> dengan atribut name="upload-frame", id="upload-frame" dan menggunakan atribut style="display:none;" agar <iframe> tersembunyi.
Di bagian tag <form> baris 2 ditambahkan atribut target="upload-frame", atribut target ini diisi dengan hal yang sama dengan atribut name"upload-frame" dari tag <iframe>.
Baris 6 menambahkan tag <div/> tempat menampilkan gambar yang telah diupload.
Baris 9 menambahkan javascript jquery. Baris selanjutnya membuat dua function javascript, startUpload() untuk menampilkan text loading saat gambar sedang diupload dan displayPicture(pictureUrl) untuk menampilkan gambar setelah selesai diupload.

Langkah selanjutnya yang perlu dilakukan adalah membuat script untuk mengupload file.



<?php 
//file upload.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'], 'photo/'.$fileName); //atau ke directory yang dinginkan 
 if($move){ 
 $success = true; 

}
echo '<script type="text/javascript">'; 
 if($success){ 
 echo "parent.displayPicture('photo/$fileName');"; 
  }else{ 
 echo "alert('Upload gagal $fileError');"; 
 } 
echo '</script>'; 
?>  

Jika file gagal diupload maka akan ditampilkan alert dan jika file berhasil diupload maka akan dipanggil function displayPicture().


Selamat Mencoba

Download Tutorials



" BANTU SUBSCRIBE CHANNEL YOUTUBE SAYA, AGAR SAYA MEMBUAT VIDEO TUTORIAL SETIAP POSTINGAN BLOG INI DAN MASIH BANYAK LAGI YANG BISA SAYA BAGIKAN UNTUK SOBAT-SOBAT SEKALIAN. TERIMAKASIH SEBELUMNYA "


Tutorial terkait dengan Ajax PHP : Tutorial Cara Upload Gambar Dengan AJAX PHP :

Terimakasih Atas Kunjungan Sahabat Setia Belajar Pintar PHP
Judul Pelajaran PHP : Ajax PHP : Tutorial Cara Upload Gambar Dengan AJAX PHP
Ditulis oleh Ivan Silalahi
Rating postingan ini 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://planetsphp.blogspot.com/2012/11/ajax-php-tutorial-cara-upload-gambar.html. Terima kasih sudah singgah membaca artikel ini. Jangan lupa like dan sharenya serta komentarnya
2 comments:
dutakreatif said... Balas

tq gan tutorialnya, sangat membantu..

Apk Game Room said... Balas

terima kasih gan... mantep sekali turialnya

Post a Comment

Template by Tutorial Website - Belajar Pintar PHP. Design by Ivan Silalahi | Copyright of Belajar Pintar PHP.