cara membuat multiple upload php

Kali ini saya akan menyajikan cara membuat multiple upload dengan php dengan cara yang mudeh yang bersumber dari blog tetangga, seperti biasa homearsip menyajikan sumber sumber artikel yang sangat mudah untuk dipahami diambil dari blog orang lain yang bertujuan sebagai bookmark agar mudah ketika membukanya.
Perhatikan tampilan berikut ini yang menggambarkan multiple file upload yang akan kita bahas.

Langkah awal untuk upload file adalah memilih jumlah file yang akan diupload. Dalam contoh ini sengaja saya kasih batasan jumlah file yang bisa diupload adalah 6 buah supaya scrollingnya tidak terlalu panjang. But… Anda bisa menambahkan sendiri maksimum jumlah filenya.

Setelah user memilih jumlah file yang akan diupload melalui combo box, selanjutnya ‘secara langsung’ akan muncul komponen upload file sejumlah pilihannya tadi tanpa mensubmit. Untuk memunculkan secara langsung komponen upload file ini, kita menggunakan Javascript.

Nah… bagaimana cara membuatnya? Pertama kita buat terlebih dahulu form dinamis untuk upload filenya.

formupload.html

<html>

<head><title>Multiple File Upload</title></head>

<body>

<form name="myform" enctype="multipart/form-data"action="upload.php" method="POST">

 

Pilih Jumlah File

 

<select name="jumfile">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

</select>

 

<br><br>

<input type="hidden" name="MAX_FILE_SIZE" value="20000000" />

 

<div id="selectfile">

</div>

 

<br>

<input type="hidden" name="n"/>

<input type="submit" name="submit" value="Upload" />

</form>

</body>

</html>

Perhatikan kode HTML di atas!

Nama komponen untuk memilih banyaknya file yang akan diupload adalah ‘jumfile’. Maksimum ukuran file yang boleh diupload adalah 2MB (perhatikan komponen dengan nama ‘MAX_FILE_SIZE’). Selanjutnya terdapat pula tag

1.<div id="selectfile">

2.</div>

Wah buat apa ya tag itu? Tag itu nantinya akan digunakan sebagai bagian untuk menampilkan komponen upload filenya sejumlah pilihan jumlah filenya. Untuk menampilkan komponen tersebut ke dalam bagian <div>..</div> nantinya akan digunakan Javascript DOM.

Berikutnya ada pula komponen <input type=”hidden” name=”n” />. Buat apa nih komponen? Komponen ini digunakan untuk menyimpan informasi tentang jumlah file yang akan diupload. Dalam hal ini nilainya sejumlah pilihan jumlah file. Untuk apa informasi jumlah file ini? Informasi ini akan digunakan untuk script uploadnya, khususnya untuk proses looping. Lho looping? ngapain harus pakai looping? Ya… Karena pada dasarnya proses upload multiple file ini adalah proses upload file yang diulang-ulang sebanyak jumlah filenya. Simpel bukan idenya?

OK.. next.. bagaimana cara membuat komponen upload yang dinamisnya? Sesuai skenario di atas yaitu sejumlah komponen upload akan muncul setelah user memilih jumlah file yang akan diupload, maka kita berikan event onchange pada combo boxnya.

formupload.html

<html>

<head><title>Multiple File Upload</title></head>

<body>

<form name="myform" enctype="multipart/form-data"action="upload.php" method="POST">

 

Pilih Jumlah File

 

<select name="jumfile" onchange="show()">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

</select>

 

<br><br>

<input type="hidden" name="MAX_FILE_SIZE" value="20000000" />

 

<div id="selectfile">

</div>

 

<br>

<input type="hidden" name="n"/>

<input type="submit" name="submit" value="Upload" />

</form>

</body>

</html>

Pada combo box, kita berikan event ‘onchange’ yang nantinya diarahkan untuk memanggil function ‘show()’ dalam Javascriptnya. Function ‘show()’ inilah yang akan menampilkan komponen upload dinamisnya. Trus… bagaimana bentuk function ‘show()’ Javascriptnya? Ini dia

formupload.html

<html>

<head>

<title>Multiple File Upload</title>

<script type="text/javascript">

 

function show()

{

var n = document.myform.jumfile.value;

var i;

var string = "";

 

for (i=0; i<=n-1; i++)

{

string = string + "Pilih File: <input name=\"userfile"+ i + "\" type=\"file\"><br>";

}

 

document.getElementById('selectfile').innerHTML = string;

document.myform.n.value = n;

}

</script>

</head>

<body>

<form name="myform" enctype="multipart/form-data"action="upload.php" method="POST">

 

Pilih Jumlah File

 

<select name="jumfile" onchange="show()">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

</select>

 

<br><br>

<input type="hidden" name="MAX_FILE_SIZE" value="20000000" />

 

<div id="selectfile">

</div>

 

<br>

<input type="hidden" name="n" />

<input type="submit" name="submit" value="Upload" />

</form>

</body>

</html>

Wah bagaimana tuh ide dalam Javascriptnya, kok bisa seperti itu? Konsepnya adalah membuat looping untuk membuat komponen <input name=”userfile” type=”file”> sejumlah n buah. Nilai n ini adalah sama dengan nilai jumlah file yang akan diupload melalui pilihan combo boxnya (n = document.myform.jumfile.value). Namun, untuk setiap komponen tersebut kita harus buat name yang berbeda karena dalam hal ini nama komponen tidak boleh sama, misalnya

<input name="userfile0" type="file">

<input name="userfile1" type="file">

<input name="userfile2" type="file">

.

.

dst

Untuk membuat sejumlah n buah komponen upload file tersebut, maka digunakan looping

for (i=0; i<=n-1; i++)

{

string = string + "Pilih File: <input name=\"userfile"+ i + "\" type=\"file\"><br>";

}

Selanjutnya komponen-komponen tersebut digabung menjadi satu ke dalam sebuah string, dan akhirnya string tersebut ditampilkan ke dalam bagian <div id=”selectfile”></div> dengan cara memberikan perintah:

1.document.getElementById('selectfile').innerHTML = string;

Sedangkan perintah

1.document.myform.n.value = n;

digunakan untuk memberikan nilai pada komponen <input type=”hidden” name=”n” /> dengan nilai yang sama dengan n (berasal dari combobox)

OK.. paham ya konsep Javascript untuk membuat form upload dinamis. Sekarang kita fokus ke script PHP untuk proses uploadnya. Pada prinsipnya sama seperti upload single file, namun dalam script ini kita buat looping dalam proses uploadnya.

upload.php

<?php

 

// membaca nilai n dari form upload

$n = $_POST['n'];

 

// setting nama folder tempat upload

$uploaddir = 'data/';

 

// proses upload yang diletakkan dalam looping

for ($i=0; $i<=$n-1; $i++)

{

// membaca nama file yang diupload di setiap komponen upload

$fileName = $_FILES['userfile'.$i]['name'];   

 

// membaca ukuran file yang diupload di setiap komponen upload

$fileSize = $_FILES['userfile'.$i]['size'];

 

// nama file temporary yang akan disimpan di server

$tmpName  = $_FILES['userfile'.$i]['tmp_name'];

 

// menggabungkan nama folder dan nama file yang diupload

$uploadfile = $uploaddir . $fileName;

 

// proses upload file ke folder 'data'

if ($fileSize > 0)

{

if (move_uploaded_file($tmpName, $uploadfile))

{

echo "File ".$fileName." telah diupload<br>";

}

else

{

echo "File ".$fileName." gagal diupload<br>";

}

}

}

 

?>

Ada hal yang perlu kita perhatikan terkait dengan script di atas. Misalkan kita memilih jumlah file yang akan diupload sejumlah 4 buah. Setelah kita memilih 4 pada combo boxnya, maka akan muncul 4 buah komponen untuk upload file. Namun, dari 4 komponen yang muncul ternyata kita hanya menggunakan 2 komponen saja, sehingga 2 komponen yang lain kosong. (lihat gambar di bawah ini)

Nah… untuk mengantisipasi bahwa proses upload hanya terjadi jika komponen uploadnya telah terisi filenya, maka digunakanlah statement berikut ini dalam script di atas.

if ($fileSize > 0)

{

....

}

Idenya adalah dengan mengecek ukuran file yang akan diupload di setiap komponen upload. Bila ukuran filenya > 0 maka dipastikan dalam komponen upload tersebut terdapat file yang akan diupload. Namun jika tidak (ukuran file kurang atau sama dengan 0) maka dianggap tidak ada file yang akan diupload.

Sumber: http://blog.rosihanari.net/script-multiple-file-upload-dengan-php/

Home Arsip

cara membuat multiple upload php

0 Response to "cara membuat multiple upload php"

Posting Komentar