Beranda Javascript Membuat Form Upload File Image Base64 dengan Ajax dan PHP

Membuat Form Upload File Image Base64 dengan Ajax dan PHP

107
0
BERBAGI
Bantu support blog asdar.id agar bisa lebih berkembang lagi untuk membagikan ilmu pengetahuan secara gratis. Caranya yaitu dengan menyisihkan sedikit rejeki anda melalui laman donasi, klik DISINI. Semoga apa yang anda berikan bisa menjadi penolong di Akhirat kelak, Amin Ya Rabbal 'Alamin :-)

Kali ini saya akan memberikan contoh koding bagaimana Membuat Form Upload File Image Base64 dengan Ajax dan PHP. Dalam tutorial  ini dibutuhkan library yaitu JQuery bisa dengan mendownload filenya atau menggunkan link cdn.

Berikut ini adalah contoh form upload kita akan membuat 3 file yaitu index.html dan upload.js sebagai UI dan file upload.php untuk backendnya. Tambahkan juga folder foto sebagai media untuk menyimpan file yang akan diupload nantinya.

File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Gambar</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="upload.js"></script>
    <style>
        #container{
            max-width: 400px;
            margin: 30px auto
        }
        #loading{
            height: 22px;
            display: inline-block;
        }
        #preview{
            max-width: 100%;
            margin-top: 15px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="container"> 
        <div>
            <input id="input_gambar" type="file"> 
            <button id="tombol_upload">Upload</button> 
        </div> 
        <img id="preview" src="" alt="">
    </div>
</body>
</html>

Di sini saya membuat 3 elemen html yang akan di pakai yaitu input file dengan id input_gambar, id tombol_upload sebagai tombol upload dan id preview untuk menampilkan gambar yang dipilih user.

File upload.js

var filebase64 = '';
!(function($) {
    "use strict";  
    $(document).on('click','#tombol_upload',function(){  
        if(filebase64 == ''){alert('Tidak ada file untuk diupload!'); return;}
        var button = $(this);
        $.ajax({
            url: 'upload.php',
            data: {file:filebase64},
            type: "post",
            dataType: "json",
            beforeSend: function () {
                button.html('Mengunggah...');
            },
            success: function (data) { 
                if(data.sukses){
                    alert('Sukses!')
                    $('#preview').hide(); // hilangkan previewnya
                }else{
                    alert('Uploda gagal!');
                }
                button.html('Upload');
            },
            error: function () {
                alert('Koneksi gagal!')
                button.html('Upload');
            }
        });
    })  
    $(document).on('change','#input_gambar',function(){  
        var thiss = this;
        var FR = new FileReader();
        var mm = thiss.files[0];
        var size = thiss.files[0].size/1024;
        var allow = ['image/jpeg','image/png']; 
        if(size > 2048){ alert('Ukuran file maksimal 1MB!'); $(thiss).val(''); return; }
        if(allow.indexOf(mm['type']) == -1){ alert('File harus type jpg atau png!'); $(thiss).val(''); return; }
        FR.addEventListener("load", function(e) {
            filebase64 = e.target.result; 
            $('#preview').attr('src',filebase64).show() // tampilkan preview file
        });
        FR.readAsDataURL( thiss.files[0] ); 
        $(thiss).val(''); 
    })   
})(jQuery);

Di file js ini di buat sebuah variable global filebase64 untuk menyimpan konten file yang di pilih dari input file. Nantinya variable ini akan berisi string panjang base64 misalnya

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA….

Selanjutnya akan di lempar ke file upload.php untuk menyimpan string base64 tersebut menjadi file gambar ke folder foto.

File upload.php

<?php
$lokasiupload = dirname(__FILE__).'/foto/';
$imageData = (isset($_POST['file']))?$_POST['file']:'';
if(!empty($imageData)){
    list($type, $imageData) = explode(';', $imageData);
    list(,$extension) = explode('/',$type);
    list(,$imageData) = explode(',', $imageData);
    $fileName = uniqid().'.'.$extension;
    $imageData = base64_decode($imageData);
    file_put_contents( $lokasiupload . $fileName, $imageData);
    die(json_encode(['sukses'=>true]));
}
die(json_encode(['sukses'=>false]));
?>

Pada kode di atas file akan di save ke folder foto dan akan menampilkan string json sukses trus jika berhasil dan false jika gagal.

Demikian tutorial belajar php kali ini selamat mencoba dan tetap semangat berkoding.

Baca juga:

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama anda disini