Ajax PHP : Tutorial Cara Upload Gambar Dengan AJAX PHP

Posted on

Hakekatnya hal ini tak beda jauh dengan cara mengupload foto dengan PHP, hanya saja dengan menggunakan ajax, karenanya cara kerjanya lebih cepat dan dinamis.
Panduan Cara Upload Gambar dengan AJAX PHP akan menggunakan cara yang sama dengan yang digunakan di panduan tersebut, ditambahan sedikit trik dan javascript. Bagi meng-upload gambar dengan AJAX diperlukan bantuan  <iframe>. Di panduan 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 bagi 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 berikutnya merancang dua function javascript, startUpload() bagi menampilkan text loading ketika gambar sedang diupload dan displayPicture(pictureUrl) bagi menampilkan gambar setelah selesai diupload.

Langkah berikutnya yang perlu dilakukan yaitu merancang script bagi 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>’; 
?>  

Kalau file gagal diupload karenanya akan ditampilkan alert dan bila file berhasil diupload karenanya akan dipanggil function displayPicture().

Selamat Mencoba

Download Tutorials

Leave a Reply

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