Preview File Gambar sebelum di Upload dengan Javascript
Seringkali, ketika akan mengupload file gambar, perlu dipastikan dahulu gambar yang akan diupload dalam bentuk preview.
Dan teknologi HTML5 telah menambahkan kemampuan upload banyak file dengan hanya satu element input dengan tag type='file' dan multiple.
Sangat mudah.
Entah penulis yang ketinggalan informasi atau gimana, sebab penulis teringat jaman dahulu, perlu menambahkan satu persatu, sesuai jumlah file yang akan ditambahkan melalui appendChild, jika diperlukan upload banyak file pada form.
Di bawah ini adalah kode preview image ketika input file berubah (onchange), dan gambar akan ditampilkan pada element dengan Id='imgpreview'.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h1>The input multiple attribute</h1>
<form action="/action_page.php" enctype="multipart/form-data">
<label for="files">Select files:</label>
<div id="imgpreview"></div>
<input type="file" id="files" name="files" accept="image/*" multiple onchange="showPreview(event);"><br><br>
<input type="submit">
</form>
<script>
function showPreview(event){
if(event.target.files.length > 0){
for(var i=0;i<event.target.files.length;i++){
var src = URL.createObjectURL(event.target.files[i]);
var preview = document.getElementById("imgpreview");
var image = document.createElement('img');
image.src = src;
image.style="max-height:100px;";
preview.appendChild(image);
}
}
}
</script>
</body>
</html>
Komentar
Posting Komentar