Untuk mendapatkan nama file sebelum diupload, kita bisa menggunakan
FileReader. FileReader membantu kita mendapatkan informasi yang
dibutuhkan tentang file yang ada di komputer pengguna hanya dengan
menggunakan javascript. Berikut ini adalah contoh penggunaan FileReader
untuk menampilkan gambar yang akan diupload. Selain FileReader, kita
juga butuh createElement untuk membuat elemen HTML baru dan appendChild
untuk menambahkannya ke elemen yang sudah ada.
Kita bisa menggabungkan file reader dengan Ajax dan FormData untuk mengupload file tanpa meninggalkan halaman. Kita bisa menggunakan append untuk menambahkan beberapa file sekaligus ke dalam FormData sebelum data dikirim dengan AJAX.
Karena script dan CSS-nya panjang,
kita pisahkan saja script dari kode HTML-nya. Sebelum mengetik script
dan CSS-nya, simpan dulu HTML-nya di file utama server kalian, misalnya
"index.php". Ketik script berikut ini dan simpan dalam file
"scriptku.js".
Oh ya, script PHP tujuan dari form-nya bisa kalian lihat di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<style>
#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}
</style>
</head>
<body>
<div id="main">
<h1>Upload Your Images</h1>
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="images" id="images" multiple />
<button type="submit" id="tombol">Upload Files!</button>
</form>
<div id="hasil"></div>
<ul id="image-list">
</ul>
</div>
<script>
var input = document.getElementById("images"),
formdata = false;
if (window.FormData) {
formdata = new FormData();
document.getElementById("tombol").style.display = "none";
}
input.addEventListener("change", function (evt) {
var i = 0, len = this.files.length, img, reader, file;
var list = document.getElementById("image-list");
list.innerHTML="";
for ( i=0; i < len; i++ ) {
file = this.files[i];
if (file.type.match(/image.*/)){
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
var source=e.target.result;
var li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
};
reader.readAsDataURL(file);
}
}
}
}, false);
</script>
</body>
</html>
Kita bisa menggabungkan file reader dengan Ajax dan FormData untuk mengupload file tanpa meninggalkan halaman. Kita bisa menggunakan append untuk menambahkan beberapa file sekaligus ke dalam FormData sebelum data dikirim dengan AJAX.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<link rel="stylesheet" href="styleku.css"/>
</head>
<body>
<div id="main">
<h1>Upload Your Images</h1>
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="images" id="images" multiple />
<button type="submit" id="tombol">Upload Files!</button>
</form>
<button onclick="kirim(event)">Upload Files!</button>
<div id="hasil"></div>
<ul id="image-list">
</ul>
</div>
<script src="scriptku.js">
</script>
</body>
</html>
var input = document.getElementById("images"),
formdata = false;
if (window.FormData) {
formdata = new FormData();
document.getElementById("tombol").style.display = "none";
}
input.addEventListener("change", function (evt) {
var i = 0, len = this.files.length, img, reader, file;
var list = document.getElementById("image-list");
list.innerHTML="";
for ( i=0; i < len; i++ ) {
file = this.files[i];
if (file.type.match(/image.*/)){
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
var source=e.target.result;
var li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
};
reader.readAsDataURL(file);
}
}
}
}, false);
function kirim(evt) {
var fileku=document.getElementById("images");
var i = 0, len = fileku.files.length, file;
if(len>0){
document.getElementById("hasil").innerHTML = "Mengupload . . .";
if (formdata) {
for ( i=0; i < len; i++ ) {
file = fileku.files[i];
if (!!file.type.match(/image.*/)) {
formdata.append("images[]", file);
}
}
}
if (formdata) {
koneksi=new XMLHttpRequest();
koneksi.open("POST", "upload.php");
koneksi.send(formdata);
koneksi.onloadend=function(e){
document.getElementById("hasil").innerHTML = this.response;
}
}
}
}
Yang terakhir, ketik style CSS berikut dan simpan dalam file "styleku.css".#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}
Silakan buka lewat server atau website kalian dan lihat hasilnya.Oh ya, script PHP tujuan dari form-nya bisa kalian lihat di bawah ini.
<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}
}
echo "<h2>Berhasil meng-upload file</h2>";
?>