Form upload gambar lengkap dengan image preview
Dalam kasus ini di butuhkan 2 file yaitu index.php dan upload_image.php, file index.php berisi tampilan form untuk upload gambarnya sedangkan upload_image.php sebagai fungsi untuk upload gambar.
Berikut isi dari index.php :
<html>
<head>
<title>Upload Image</title>
<script type="text/javascript" src="js/jquery.min.js"></script> <!-- Plugin JQuery yang di butuhkan untuk preview image -->
<style type="text/css" rel="stylesheet"> /* Style untuk tampilan Form upload gambar */
#file {
color: red;
padding: 5px;
border: 5px solid #8BF1B0;
background-color: #8BF1B0;
margin-top: 10px;
border-radius: 5px;
box-shadow: 0 0 15px #626F7E;
max-width: 250px;
}
#image_preview{
font-size: 30px;
top: 100px;
left: 100px;
width: 250px;
height: 230px;
text-align: center;
line-height: 180px;
font-weight: bold;
color: #C0C0C0;
background-color: #FFFFFF;
overflow: hidden;
}
.submit{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100px;
border-radius: 5px;
padding: 10px 0;
outline: none;
}
.submit:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
.wrapper {
background: rgb(221, 221, 221) none repeat scroll 0 0;
border-radius: 5px;
box-shadow: 0 0 10px 0 #000;
padding: 20px;
position: absolute;
text-align: center;
}
</style>
<script type="text/javascript"> /* script JQuery untuk load gambar pada bagian preview */
$(function() {
$("#file").change(function() {
$("#message").empty(); // To remove the previous error message
var file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if (!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
$('#previewing').attr('src','noimage.png');
$("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
return false;
}else {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$("#file").css("color","green");
$('#image_preview').css("display", "block");
$('#previewing').attr('src', e.target.result);
$('#previewing').attr('width', '250px');
$('#previewing').attr('height', '230px');
}
</script>
</head>
<body>
<div class="wrapper">
<h1>Upload Gambar</h1>
<div class="main">
<form id="form_slideshow" action="upload_image.php" method="post" enctype="multipart/form-data">
<div style="width: 250px;">
<div style="float: left; margin-right: 20px; padding-top: 20px;">
<div id="image_preview"><img id="previewing" src="images/noimage.png" /></div>
<div id="selectImage" style="margin: 50px 0 0;">
<div style="float: left;"><input type="file" name="file" id="file" required /></div>
<div style="clear: both;"></div>
<div style="float: right; margin-top: 15px;"><input type="submit" value="Simpan" class="submit" /></div>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>Selanjutnya upload_image.php :
<?php
$image_name = $_FILES['file']['name'];
$path = "images/" . $image_name;
if (($_FILES['file']["type"] == "image/jpg" || $_FILES['file']["type"] == "image/jpeg" || $_FILES['file']["type"] == "image/png"))
{
$upload = move_uploaded_file($_FILES['file']['tmp_name'], $path);
if ($upload )
{
echo "<script>alert('Upload gambar berhasil.'); window.location.assign('index.php');</script>";
}
else
{
echo "<script>alert('Upload gambar gagal.'); window.location.assign('index.php');</script>";
}
}
else
{
echo "<script>alert('Upload gambar gagal, file gambar salah.'); window.location.assign('index.php');</script>";
}
?>Pada baris ke 2 – 3 mendefinisikan nama file gambar yang akan di upload dan lokasi gambar akan disimpan, pada baris ke 5 dilakukan pengecekan apakah file merupakan gambar atau bukan, file yang di izinkan berupa file JPG, JPEG atau PNG. Kemudian pada baris ke 7 adalah proses upload gambar dengan menggunakan fungsi move_uploaded_file().
Semoga bermanfaat.
Subscribe
0 Comments