Upload File menggunakan AJAX, jQuery dan PHP

Hari ini saya akan membuat script Ajax upload file sederhana dengan jQuery dan PHP. Kamu akan menemukan banyak plugin jQuery untuk meng-upload file atau gambar tanpa me-refresh halaman. Tetapi kalau kamu ingin mempelajari proses upload file AJAX dan membuat sendiri script upload file AJAX, tutorial ini akan membantumu.

Di sini saya akan menunjukkan bagaimana kamu dapat meng-upload file tersebut ke server tanpa me-refresh halaman menggunakan jQuery, AJAX, dan PHP. Menggunakan script file upload AJAX sederhana ini, kamu dapat dengan mudah menerapkan fungsi upload file tanpa menggunakan plugin pihak ke-3.

Kode HTML

Kode HTML berikut akan menampilkan kotak file upload. Pengguna dapat memilih file untuk meng-upload dengan cara mengklik pada kotak ini.

<form>		
    <div id="kotakUpload">
        <p>Pilih file untuk di-upload</p>
    </div>
    <input type="file" name="inputFile" id="inputFile" />
</form>

Kode CSS

Untuk membuat kotak upload file terlihat bagus, gunakan CSS berikut ini entar silahkan diubah sesuai selera kamu.

#kotakUpload{
    border: 1px dashed #38908a;
    border-radius: 5px;
    background: #deface;
    cursor: pointer;
}
#kotakUpload{
    min-height: 150px;
    padding: 54px 54px;
    box-sizing: border-box;
}
#kotakUpload p{
    text-align: center;
    margin: 2em 0;
    font-size: 16px;
}
#inputFile{
    display: none;
}

Kode JavaScript

JQuery ini digunakan dalam script file upload AJAX, sehingga, library jQuery ini harus dimuat lebih dulu.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Kode JavaScript berikut ini menangani proses upload file dan menunjukkan status upload pengguna. Dan jugaa, script di bawah ini membatasi pengguna untuk meng-upload hanya file gambar dalam ukuran dibawah 1 MB. Silahkan ubah batasannya sesuai kebutuhan kamu.

$(function(){
    //ini yang akan menampilkan window untuk memilih file ketika kotak upload diklik
    $("#kotakUpload").click(function(){
        $("#inputFile").click();
    });
    
    //mencegah browser dari membuka file ketika didrag and drop
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    //memanggil fungsi untuk menangani file upload saat milih File
    $('input[type=file]').on('change', fileUpload);
});

function fileUpload(event){
    //memberitahu pengguna tentang status file upload
    $("#kotakUpload").html(event.target.value+" mengupload...");
    
    //mendapatkan file yang dipilih
    files = event.target.files;
    
    //memeriksa data form 
    var data = new FormData();                                   

    //file data is presented as an array
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if(!file.type.match('image.*')) {              
            //memeriksa format file
            $("#kotakUpload").html("Silakan pilih file gambar.");
        }else if(file.size > 1048576){
            //memeriksa ukuran file (dalam bytes)
            $("#kotakUpload").html("Maaf, file Anda terlalu besar (melebihi 1 MB)");
        }else{
            //menambahkan file yang dapat diunggah ke objek FormData
            data.append('file', file, file.name);
            
            //membuat XMLHttpRequest baru
            var xhr = new XMLHttpRequest();     
            
            //data file post yang untuk diupload
            xhr.open('POST', 'upload.php', true);  
            xhr.send(data);
            xhr.onload = function () {
                //mendapatkan respon dan menunjukkan status upload
                var response = JSON.parse(xhr.responseText);
                if(xhr.status === 200 && response.status == 'ok'){
                    $("#kotakUpload").html("File telah berhasil diupload. Klik untuk mengupload file lainnya.");
                }else if(response.status == 'type_err'){
                    $("#kotakUpload").html("Silakan pilih file gambar. Klik untuk mengupload file lainnya.");
                }else{
                    $("#kotakUpload").html("Ada sedikit masalah, silakan coba lagi.");
                }
            };
        }
    }
}

Setelah pengguna memilih file, file data disampaikan ke file upload.php untuk meng-upload menggunakan PHP.

Upload file ke Server (upload.php)

Sebelum meng-upload, file yang dikirimkan akan divalidasi apakah jenis file diperbolehkan. Setelah file valid, file akan diupload ke server dan data respon dikembalikan sebagai format JSON.

<?php
if(isset($_POST) == true){
    //menghasilkan nama file yang unik, akan ada angka acak didepannya
    $namaFile = time().'_'.basename($_FILES["file"]["name"]);
    
    //folder upload
    $targetDir = "upload/";
    $targetFilePath = $targetDir . $namaFile;
    
    //membolehkan ekstensiOk file tertentu
    $ekstensiFile = pathinfo($targetFilePath,PATHINFO_EXTENSION);
    $ekstensiOk = array('jpg','png','jpeg','gif');
    
    if(in_array($ekstensiFile, $ekstensiOk)){
        //upload file ke server
        if(move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath)){
            //memasukkan file data ke dalam database jika diperlukan
            //........
            $respon['status'] = 'ok';
        }else{
            $respon['status'] = 'err';
        }
    }else{
        $respon['status'] = 'type_err';
    }
    
    //menampilkan data respon dalam format JSON
    echo json_encode($respon);
}

Kamu bisa menambah script tersebut dengan fungsionalitas yang lebih canggih, seperti pratinjau gambar, progress bar, dll.