Diberdayakan oleh Blogger.
RSS

Upload Gambar Menggunakan Ajax (jQuery)


.. 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:
<!-- Form Upload -->
<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> 

<!-- Tampilkan Gambar -->
<div id="uploaded-picture"> 
</div> 

<!-- Load jQuery.js -->
<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');"; 

echo '</script>'; 
?>
 

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

0 komentar:

Posting Komentar