Upload File disertai Preview (javascript)

Upload File disertai Preview (javascript)

Artikel kali ini kita akan mencoba melakukan upload file pada php, kemudian disertai dengan pratinjau file tersebut (preview). Jadi ketika kita akan melakukan upload file, kita terlebih dahulu memilih file yang akan di upload, kemudian file tersebut akan langsung ditampilkan pratinjaunya (preview). Cara ini sangat memudahkan pengguna website, karena mereka tahu file yang akan diupload.

Buat File
1. index.php
2. proses-upload.php

File index.php

<!DOCTYPE html>
<html>
<head>
	<title>Upload Javascript</title>

	<!-- Javascript -->
	<script type="text/javascript">
	  var loadFile = function(event) {
	    var output = document.getElementById('output');
	    output.src = URL.createObjectURL(event.target.files[0]);
	  };
	</script>

</head>
<body>
	<h2>Upload Image dengan Javascript</h2>
	
	<!-- image preview -->
	<img id="output"/ height="150" width="150">

	<form action="proses-upload.php" method="POST" enctype="multipart/form-data">
		<input type="file" accept="image/*" onchange="loadFile(event)" name="file" required="required">
		<input type="submit" name="submit" value="UPLOAD">
	</form>

	<ol style='font-style: italic; font-size: 12px; color: red;'>
		<li>Pilih File (browse)</li>
		<li>File yang diperbolehkan - <b>images(jpeg,jpg,png).</b></li>
		<li>File kurang dari 100kb</li>
	</ol>
</body>
</html>

Untuk javascriptnya tempatkan di tag head, atau di body

	<!-- Javascript -->
	<script type="text/javascript">
	  var loadFile = function(event) {
	    var output = document.getElementById('output');
	    output.src = URL.createObjectURL(event.target.files[0]);
	  };
	</script>
accept="image/*"

attribut tersebut memberikan pembatasan, ketika kita menekan tombol browse, file yang diperbolehkan untuk diupload hanya media file image.
Jika teman-teman ingin mengupload file tanpa melakukan pembatasan type file, kalian bisa mencobanya dengan merubahnya, seperti berikut

<input type="file" accept="*" onchange="loadFile(event)" name="file" required="required">

File proses-upload.php

<?php
	
	$nm_file = $_FILES["file"]["name"];
	$tp_file = $_FILES["file"]["tmp_name"];
	$sz_file = $_FILES["file"]["size"];
	$ty_file = $_FILES["file"]["type"];

	$dir = "hasil-upload/$nm_file";

	move_uploaded_file($tp_file, $dir);

	// cek status file
	if($sz_file > 100000){
		// tampilkan status gagal karena melebihi batas
		echo $nm_file . " <b>Gagal! file melebihi ukuran. Ukuran maksimal 100kb</b><br>"."<input type='button' value='Kembali' onclick='history.back(-1)' />";
	} else if (file_exists("hasil-upload/" . $nm_file)) {
		// tampilkan status gagal karena file sudah ada
		echo $nm_file . " <b>Gagal! File sudah ada</b><br>" ."<input type='button' value='Kembali' onclick='history.back(-1)' />";
	} else {
		//lokasi file
		$imgFullpath = "http://".$_SERVER['SERVER_NAME'].dirname($_SERVER["REQUEST_URI"].'?').'/'. "hasil-upload/" . $nm_file;
		
		//deskripsi file
		echo "<b>Stored in:</b><a href = '$imgFullpath' target='_blank'> " .$imgFullpath.'<a>';

		echo "<br/><b>File Name:</b> " . $nm_file . "<br>";
		echo "<b>Type:</b> " . $ty_file . "<br>";
		echo "<b>Size:</b> " . $sz_file . " kB<br>";
		echo "<b>Temp file:</b> " . $tp_file . "<br>";
	}

?>

Untuk demo silahkan klik link dibawah ini:
URL: http://www.yellowweb.id/demo/upload-javascript/

Jika ada pertanyaan, teman-teman bisa mengirimkan pesan melalui email di
[email protected]

Sertakan screenshot/ screen capture, untuk masalah yang sedang dihadapi. Terima kasih sampai jumpa kembali diartikel berikutnya.

Comments are closed.