Pada artikel kali ini saya akan menjelaskan bagaimana caranya membuat upload banyak file sekaligus dengan 1 input saja. Dengan metode seperti ini akan membuat tampilan form lebih sederhana karena kita cukup membuat 1 input saja dibandingkan dengan membuat beberapa input file upload.
Dan dikarenakan tutorial ini menggunakan bahasa PHP native maka anda dapat menerapkan cara ini pada framework PHP apapun jika anda menggunakan framework. Berikut ini adalah cara-cara untuk membuat multiple file upload tersebut :
#MEMBUAT FORM INPUTAN
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<br/>
<div class="container">
<div class="row">
<div class="col-xs-4">
<form method="POST" role="form" enctype="multipart/form-data">
<div class="form-group">
<label for="">Mutiple File Upload</label>
<input name="upload" type="file" class="form-control" multiple="multiple">
</div>
<input name="submit" type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Kode di atas adalah contoh yang saya gunakan untuk membuat form input file. Ada 2 hal yang perlu diperhatikan agar multiple file upload ini dapat berjalan. Yang pertama adalah penggunaan enctype="multipart/form-data" pada form agar form dapat melakukan upload file. Dan yang kedua adalah property multiple="multiple" yang digunakan di dalam input type file agar input tersebut dapat melakukan upload banyak file sekaligus.
#PROSES UPLOAD
Langkah terakhir adalah dengan membuat kode PHP untuk melakukan proses upload file tersebut. Caranya seperti kode di bawah ini<?php
if (isset($_POST['submit'])){
$total = count($_FILES['upload']['name']);
for( $i=0 ; $i < $total ; $i++ ) {
$tmpFilePath = $_FILES['upload']['tmp_name'][$i];
if ($tmpFilePath != ""){
$newFilePath = "./upload/" . $_FILES['upload']['name'][$i];
if(move_uploaded_file($tmpFilePath, $newFilePath)) {
}
}
}
}
?>
Cara kerja dari kode di atas adalah, pertama kita melakukan pengecekan apakah form disubmit atau tidak. Jika iya langkah berikutnya adalah melakukan perhitungan jumlah file yang kita upload. Kemudian dilakukan looping untuk melakukan proses upload file tersebut satu per satu.
Kode contoh di atas adalah contoh sederhana yang saya berikan hanya untuk keperluan tutorial ini saja. Dalam penggunaan sesungguhnya sebaiknya anda juga menambahkan berbagai macam pengecekan, misalnya pengecekan ukuran file, tipe file yang diupload, dan lain sebagainya.
Demikian penjelasan saya pada artikel Tutorial PHP - Multiple File Upload. Selamat mencoba.
Post a Comment
Post a Comment