Selamat datang di blog Mari belajar coding. Setelah artikel sebelumnya kita belajar membuat sebuah form Upload gambar menggunakan PHP dan MySQL, pada tutorial kali ini kita akan belajar upload gambar dengan Ajax dan PHP.
Upload Gambar dengan AJAX PHP dan MySQL
1. Buat database untuk menyimpan data gambar. Contoh yang akan kita gunakan database penjualan dengan satu tabel bernama tabel produk.
CREATE DATABASE penjualan;
USE penjualan;
CREATE TABLE `produk` (
`IdProduk` int(11) PRIMARY KEY AUTO_INCREMENT,
`NamaProduk` varchar(255),
`Gambar` varchar(255),
`File_Gambar` longblob
);
2. Buat koneksi database menggunakan PHP.
<?php
mysql_connect("localhost","root","");
mysql_select_db("penjualan");
?>
3. Karena kita menggunakan ajax, tentu perlu jquery untuk menggunakan fungsi ajax nya. Kita bisa download jquery.js nya atau bisa langsung dengan CDN. Letakan kode di bawah ini sebelum tag head.
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
4. Selanjutnya buat form untuk input data produk. Karena kita menggunakan input tipe file, tambahkan attribut enctype di tag form. Lihat baris yang di beri highlight.
<table>
<form id="formProduk" method="POST" enctype='multipart/form-data'>
<tr>
<td>Nama Produk</td>
<td><input type="text" name="nama" id="nama"></td>
</tr>
<tr>
<td>Gambar</td>
<td><input type="file" name="filegambar" id="filegambar"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="simpan" value="Simpan"></td>
</tr>
</form>
</table>
5. Buat tampilan data yang berhasil di simpan menggunakan tabel.
<table border="1" id="tampilData">
<thead>
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Gambar</th>
</tr>
</thead>
<tbody>
<?php
$no=1;
$sql=mysql_query("SELECT * FROM produk order by IdProduk desc");
while ($data=mysql_fetch_array($sql)) {
?>
<tr>
<td><?=$no++?></td>
<td><?=$data['NamaProduk']?></td>
<td><img src="data:image/jpeg;base64,<?=base64_encode($data['File_Gambar'] )?>" width="100"></td>
</tr>
<?php
}
?>
</tbody>
</table>
6 Buat fungsi submit dengan javascript untuk menangani proses simpan data dengan ajax.
<script type="text/javascript">
$("form").submit(function(e) {
e.preventDefault();
var form = $('#formProduk')[0];
var data = new FormData(form);
$.ajax({
url: 'simpan-data.php',
type: 'post',
enctype: 'multipart/form-data',
data: data,
processData: false,
contentType: false,
cache: false,
success: function(data) {
alert(data);
//reload tabel tampilData
$("#tampilData").load(" #tampilData > *");
}
});
});
</script>
6. Kode lengkap seperti dibawah ini. Simpan file dengan nama latihan.php.
<!DOCTYPE html>
<html>
<head>
<title>maribelajarcoding.com</title>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<?php
mysql_connect("localhost","root","");
mysql_select_db("penjualan");
?>
</head>
<body>
<table>
<form id="formProduk" method="POST" enctype='multipart/form-data'>
<tr>
<td>Nama Produk</td>
<td><input type="text" name="nama" id="nama"></td>
</tr>
<tr>
<td>Gambar</td>
<td><input type="file" name="filegambar" id="filegambar"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="simpan" value="Simpan"></td>
</tr>
</form>
</table>
<table border="1" id="tampilData">
<thead>
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Gambar</th>
</tr>
</thead>
<tbody>
<?php
$no=1;
$sql=mysql_query("SELECT * FROM produk order by IdProduk desc");
while ($data=mysql_fetch_array($sql)) {
?>
<tr>
<td><?=$no++?></td>
<td><?=$data['NamaProduk']?></td>
<td><img src="data:image/jpeg;base64,<?=base64_encode($data['File_Gambar'] )?>" width="100"></td>
</tr>
<?php
}
?>
</tbody>
</table>
<script type="text/javascript">
$("form").submit(function(e) {
e.preventDefault();
var form = $('#formProduk')[0];
var data = new FormData(form);
$.ajax({
url: 'simpan-data.php',
type: 'post',
enctype: 'multipart/form-data',
data: data,
processData: false,
contentType: false,
cache: false,
success: function(data) {
alert(data);
//reload tabel tampilData
$("#tampilData").load(" #tampilData > *");
}
});
});
</script>
</body>
</html>
7. Terakhir buat file simpan-data.php.
<?php
//koneksi database
mysql_connect("localhost","root","");
mysql_select_db("penjualan");
//nama gambar
$nama_gambar=$_FILES['filegambar']['name'];
//ukuran gambar
$ukuran_gambar = $_FILES['filegambar']['size'];
$fileinfo = @getimagesize($_FILES["filegambar"]["tmp_name"]);
//lebar gambar
$width = $fileinfo[0];
//tinggi gambar
$height = $fileinfo[1];
//file gambar
$file_gambar=addslashes(file_get_contents($_FILES['filegambar']['tmp_name']));
if($ukuran_gambar > 81920){
echo 'Ukuran gambar melebihi 80kb';
}else if ($width > "480" || $height > "640") {
echo 'Ukuran gambar harus 480x640';
}else{
$sql=mysql_query("INSERT INTO produk(NamaProduk,Gambar,File_Gambar) VALUES('".$_POST['nama']."', '".$nama_gambar."','".$file_gambar."')");
if ($sql) {
echo 'Simpan data berhasil';
}else {
echo 'Simpan data gagal';
}
}
?>
Related search:
Upload gambar dengan AJAX PHP dan MySQL
Upload image dengan AJAX PHP
Upload file dengan AJAX PHP
Upload gambar dengan AJAX PHP dan MySQL
Upload image dengan AJAX PHP
Upload file dengan AJAX PHP