Cara Membuat Upload Folder Dengan HTML5 dan PHP - Upload folder adalah proses upload semua isi file yang terdapat di dalam folder sekaligus dengan memanfaatkan fitur dari HTML5 yaitu Directory Upload. Directory upload ini memungkinkan kita untuk menggunakan direktori sebagai inputan di dalam form HTML yang akan di proses oleh PHP, dengan adanya fitur ini memudahkan kita dalam mengupload banyak file yang sudah kita letakan dalam sebuah direktori folder tanpa harus menguploadnya satu per satu.
Baca juga : Cara Membuat Game Snake Dengan HTML5
Konsepnya adalah form input akan berisi data nama semua file yang ada di dalam folder ke bentuk array kemudian melemparkannya ke file PHP untuk di upload secara berulang menggunakan foreach.
Pertama buatlah sebuah folder di dalam webserver anda dengan nama directory_upload kemudian buatlah sebuah folder lagi di dalam folder lagi dengan nama upload ( folder upload ini nantinya akan digunakan sebagai direktori file yang berhasil di upload )
Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.
CSS
Pertama untuk mempercantik tampilan buatlah sebuah file CSS dengan nama style.css di dalam folder directory_upload dengan isi script seperti berkut :
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #333;
}
body {
text-align:center;
background-color:#61b3de;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#666;
}
.wrap {
background: #f3f8fb;
width:730px;
margin:30px auto;
border: 4px dashed #61b3de;
border-radius:4px;
padding: 20px 5px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:170%;
color:#645348;
font-style:italic;
text-decoration:none;
font-weight:100;
padding: 10px;
}
.button {
border-radius: 10px;
background-color: #61b3de;
border: 0;
color: #fff;
font-weight: bold;
font-style: italic;
padding: 6px 15px 5px;
cursor: pointer;
}
input[type="file"]{
color: transparent;
}
input[type="submit"]:hover,:focus{
background-position:100px;
}
.msg{
background: #ddeff8;
padding: 5px;
margin-bottom: 15px;
border: #61b3de dotted 1px;
}
.copy{
margin-top: 20px;
clear: both;
}
</style>
HTML5 & PHP
Sekarang untuk file HTML5 dan PHP buatlah sebuah file PHP di dalam folder directory_upload dengan nama index.php dengan isi script :
<?php
/**
* Directory/Folder upload
* @author kiash
*/
$count = 0;
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
foreach ($_FILES['files']['name'] as $i => $name) {
if (strlen($_FILES['files']['name'][$i]) > 1) {
if (move_uploaded_file($_FILES['files']['tmp_name'][$i], 'upload/'.$name)) {
$count++;
}
}
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Directory Upload using webkidriectory</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<?php
if ($count > 0) {
echo "<p class='msg'>{$count} files uploaded</p>\n\n";
}
?>
<h1>Jin Toples Programming</h1>
<h1>Folder/Directory Upload using HTML and PHP</h1>
<form method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="files" multiple="" directory="" webkitdirectory="" mozdirectory="">
<input class="button" type="submit" value="Upload" />
</form>
<p class='copy'>Copyright © <a href="http://www.w3bees.com">W3BEES</a> 2013</p>
</div>
</body>
</html>
Upload Folder Dengan HTML5 dan PHP anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.
*notes
Terkadang untuk beberapa alasan tidak bekerja di browser Mozilla
Author : kiash
From : http://www.w3bees.com/2013/03/directory-upload-using-html-5-and-php.html
Modified by : Jin Toples
Anda dapat mengunduh file jadinya di sini : DOWNLOAD
Upload Folder Dengan HTML5 dan PHP sekarang sudah selesai, silahkan baca tutorial HTML5 dan PHP lainnya.
