asdar.id menyediakan Member Premium Download untuk download file tanpa embel-embel iklan dan halaman, apa lagi harus menunggu timer yang begitu lama. Dengan berlangganan Member Premium Download, semua file dapat didownload dengan singkat langsung menuju ke sumbernya!, klik DISINI untuk DAFTAR atau DISINI untuk LOGIN :-) Jika ada pertanyaan silahkan hubungi Admin DISINI. Untuk cara download file Member Free Download, bisa membaca Tutorial Download yang ada dibawah Timer (halaman Safelink) saat menekan tombol download.
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:
