Preview dan Upload Resized Image
Bagaimana cara upload gambar, dimana gambar yang mau diupload bisa di-preview dulu?
Nah… kali ini saya berikan coding untuk preview gambar yang mau diupload.
Disini juga diberikan cara untuk resized gambar sesuai dengan resolusi yang diinginkan.
Untuk upload file gambar, kita sediakan dulu HTML form dengan input type file berikut ini.
Ketika kita memilih file gambar yang akan di upload, maka gambar tersebut akan tampil di bagian div class preview.
Ini dilakukan oleh coding Javascript dengan nama fungsi readURL().
Dalam fungsi readURL() juga dimasukan coding untuk validasi apakah file yang dipilih itu adalah file gambar (.jpg) atau bukan.
Tombol “Upload Now” juga diberikan validasi checkSize() untuk memeriksa ukuran file yang mau diupload. Pada contoh coding ini diberikan batas ukuran file yang mau diupload adalah 200KB.
<html>
<head>
<title>Preview dan Upload Resized Image</title>
<style>
div.preview {max-width:300px;height:200px;border:10px solid #000000;}
img.preview {width:100%;height:100%;}
</style>
<script>
function checkSize(max_img_size)
{ var input = document.getElementById("imgfile");
if(input.files.length==0)
{ alert("Pilih file lebih dulu!");
return false;
}
if(input.files && input.files.length == 1)
{ if (input.files[0].size > max_img_size)
{ alert("Ukuran file harus di bawah "
+ (max_img_size/1024) + " KB");
return false;
}
}
return true;
}
</script>
</head>
<body>
<h1>Preview dan Upload Resized Image</h1>
<div class="preview"><img class="preview" id="prevImage" src="noimagepreview.png" alt="Preview Image" /></div>
<br/>
<form id="Imgfrm" method="post" enctype="multipart/form-data" onsubmit="return checkSize(204800);">
Select JPG file: <input name="uploadedfile" id="imgfile" type="file" onchange="readURL(this)"; />
<input type="submit" name="upload" value="Upload Now" />
</form>
<script>
function readURL(input)
{ var ext = input.value.split('.').pop().toLowerCase();
if (ext!='jpg')
{ alert("Pilih file JPG!");}
else
{ if (input.files && input.files[0])
{ var reader = new FileReader();
reader.onload = function (e)
{document.getElementById('prevImage').src=e.target.result;}
reader.readAsDataURL(input.files[0]);
}
}
}
</script>
</body>
</html>
Setelah HTML Form dan Validasi Javascript sudah dibuat, berikutnya adalah proses upload gambar dengan resize. Maksudnya adalah upload file dengan cara resize resolusi gambar.
Berikut ini coding PHP untuk proses upload gambar dengan resize.
<?php
function resize($newWidth, $targetFile, $originalFile)
{ $img = imagecreatefromjpeg($originalFile);
list($width, $height) = getimagesize($originalFile);
$newHeight = ($height / $width) * $newWidth;
$tmp = imagecreatetruecolor($newWidth, $newHeight);
imagecopyresampled($tmp, $img, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
if (file_exists($targetFile)) {unlink($targetFile);}
imagejpeg($tmp, "$targetFile.jpg");
}
if(isset($_POST['upload']))
{ $uploadedfile = $_FILES['uploadedfile']['name'];
$ext = strtolower(pathinfo($uploadedfile, PATHINFO_EXTENSION));
if ($ext!='jpg') die ("Error: Harap Upload file JPG!");
$target_path = "img/A01.jpg";
resize('300' , $target_path , $uploadedfile);
}
?>
Selamat mencoba. Semoga berhasil.
Coding Website 