Script Upload Gambar Menggunakan Ajax

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:
<!-- 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>'; 
?> 
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 disini

Semoga tutorial ini dapat memberikan manfaat yang sebesar-besarnya bagi Anda.

Artikel Terkait di Bawah posting

Posted in: kumpulan script, php, PHP AJAX jQuery, script php