Pada kesempatan kali ini saya akan memberikan Inspirasi Source Code tentang Cara Mudah Review sebelum Upload,Edit,Hapus Gambar Pada Php Dan Mysql.
Lihat juga: Cara Mudah Membatasi Size/Ukuran Maksimum Upload File Gambar
Berikut langkah-langkahnya:
- Siapkan terlebih dahulu database untuk penyimpanan gambar
- Siapkan Folder penyimpanan gambar
- Download file dropify.min.css dan dropify.min.js
- Ketikan source code file penginputan gambar pada form seperti berikut:
<link href="css/dropify.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<script type="text/javascript" src="js/dropify.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Basic
$('.dropify').dropify();
// Translated
$('.dropify-fr').dropify({
messages: {
default: 'Glissez-déposez un fichier ici ou cliquez',
replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
remove: 'Supprimer',
error: 'Désolé, le fichier trop volumineux'
}
});
// Used events
var drEvent = $('.dropify-event').dropify();
drEvent.on('dropify.beforeClear', function(event, element){
return confirm("Do you really want to delete \"" + element.filename + "\" ?");
});
drEvent.on('dropify.afterClear', function(event, element){
alert('File deleted');
});
});
</script>
<form action="" method="post">
<div class="form-group row">
<label class="col-sm-2 control-label">Upload Foto</label>
<div class="col-sm-6">
<input type="file" name="foto" id="input-file-max-fs" class="dropify" required="" data-errormessage-value-missing="Upload Foto" />
</div>
</div>
</form>
<?php
include "include/koneksi.php";
if(isset($_POST['simpan'])){
$foto=$_FILES['foto']['name'];
if(strlen($foto)>0){
if(is_uploaded_file($_FILES['foto']['tmp_name'])){
$ext=strtolower(substr($_FILES['foto']['name'],-3));
if($ext=='gif')
$ext=".gif";
else
$ext=".png";
move_uploaded_file($_FILES['foto']['tmp_name'],"folder_foto/". basename(($_GET['id_gambar']).$ext));
}
$a=mysql_query("insert into tabel_foto values('', '".($getId[0]+1).$ext."')");
if($a){
echo '<div class="alert alert-success alert-st-one" role="alert"> <span class="adminpro-icon adminpro-checked-pro admin-check-pro"></span><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><p class="message-mg-rt">Data Sukses di Simpan,..!</p></div>';
}
}
?>
Hasilnya seperti gambar diatas.
Untuk proses Edit gambar ketikan source code seperti berikut:
<?php
include "include/koneksi.php";
if(isset($_POST['edit'])){
$foto=$_FILES['foto']['name'];
if(strlen($foto)>0){
if(is_uploaded_file($_FILES['foto']['tmp_name'])){
$ext=strtolower(substr($_FILES['foto']['name'],-3));
if($ext=='gif')
$ext=".gif";
else
$ext=".png";
move_uploaded_file($_FILES['foto']['tmp_name'],"folder_foto/". basename(($_GET['id_gambar']).$ext));
}
$a=mysql_query("update tabel_foto set foto='".$_GET['id_gambar'].$ext."' WHERE id_gambar='$id_gambar'");
}
if($a){
echo '<div class="alert alert-success alert-st-one" role="alert"> <span class="adminpro-icon adminpro-checked-pro admin-check-pro"></span><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><p class="message-mg-rt">Data Sukses di Update,..!</p></div>';
}
}
?>
<form action="" method="post">
<?php
$foto=$r['foto'];
if(empty($foto)){
?>
<div class="form-group row">
<label class="col-sm-2 control-label">Upload Foto</label>
<div class="col-sm-6">
<input type="file" name="foto" id="input-file-max-fs" class="dropify" required="" data-errormessage-value-missing="Upload Foto" />
</div>
</div>
<?php
} else{
?>
<div class="form-group row">
<label class="col-sm-2 control-label">Foto Sebelumnya</label>
<div class="col-sm-2">
<img src="<?php echo "folder_foto/".$foto; ?>" alt="foto" width="80" height="90" style="border: 3px solid #DDD;" />
</div></div>
<div class="form-group row">
<label class="col-sm-2 control-label">Ganti Foto</label>
<div class="col-sm-6">
<input type="file" name="foto" id="input-file-max-fs" class="dropify" />
</div>
</div>
<?php } ?>
</form>
<link href="css/dropify.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<script type="text/javascript" src="js/dropify.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Basic
$('.dropify').dropify();
// Translated
$('.dropify-fr').dropify({
messages: {
default: 'Glissez-déposez un fichier ici ou cliquez',
replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
remove: 'Supprimer',
error: 'Désolé, le fichier trop volumineux'
}
});
// Used events
var drEvent = $('.dropify-event').dropify();
drEvent.on('dropify.beforeClear', function(event, element){
return confirm("Do you really want to delete \"" + element.filename + "\" ?");
});
drEvent.on('dropify.afterClear', function(event, element){
alert('File deleted');
});
});
</script>
Hasilnya seperti gambar diatas.
Sedangkan untuk proses menghapus gambar pada database dan folder penyimpanan seperti script berikut:
<?php
include "include/koneksi.php";
$id_gambar=$_GET['id_gambar'];
if($_GET['id_gambar']){
$cari=mysql_query("select * from tabel_foto WHERE id_gambar='$id_gambar'");
$dt=mysql_fetch_array($cari);
$foto=$dt['foto'];
$tmpfile = "folder_foto/$dt[foto]";
$modal=mysql_query("Delete FROM tabel_foto WHERE id_gambar='$id_gambar'");
if(!$modal){
echo '<script language="javascript" type="text/javascript">
alert("data gagal terhapus!");</script>';
echo "<meta http-equiv='refresh' content='0; url=index.php'>";
}else{
unlink ($tmpfile);
echo '<script language="javascript" type="text/javascript">
alert("data berhasil di hapus!");</script>';
echo "<meta http-equiv='refresh' content='0; url=index.php'>";
}
}
?>
Demikian tutorial singkat tentan Cara Mudah Review sebelum Upload,Edit,Hapus Gambar Pada Php Dan Mysql yang dapat saya bagikan dan semoga bermanfaat…..!
Lihat juga: Tips Input File Video Pada Php Dan Mysql - Inspirasi Source Code
Post a Comment