Download games | Snowmoon

[php/js]Multiple file upload

Heya, snowmooners!

I'm back with another php tutorial..and this time it's not only php but JS as well.

I was making an upload script for a client and he wanted it as simple as possible. So I just made a php one.. Select how many fields you want, press submit, script reloads page and the number of fields selected is added.

For me it seemed a bit uncomfortable so I made a JS enabled form that adds/removes upload fields dynamically!

Before we start - you'll need a server with PHP enabled, some php and JavaScript knowledge and a simple text editor like notepad (I suggest something that highlights syntax though as it makes the script easier to read. Try HTML Kit).

Ok.. lets start!

First, create a file named index.htm!

Put this code in it

Code



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>

<title>Untitled</title>

<script type="text/javascript">

<!--

function addUpload() {

var container = document.getElementById('myUploadContainer');

var num = document.getElementById('total');

var newNum = (num.value-1)+2;

num.value = newNum;

var uploadDiv = document.createElement('div');

var anotherBox = document.createElement('input');

var boxName = 'uploadBox_'+newNum;

anotherBox.setAttribute("type","file");

anotherBox.setAttribute("name",boxName);

uploadDiv.setAttribute("id",boxName);

uploadDiv.appendChild(anotherBox);

uploadDiv.innerHTML = uploadDiv.innerHTML+" <a href='#' onclick='removeField(\""+boxName+"\");'>[Remove Upload Box #"+newNum+"]</a>";

container.appendChild(uploadDiv);

}



function removeField(fieldID){

var container = document.getElementById('myUploadContainer');

container.removeChild(document.getElementById(fieldID));

}

//-->

</script>



</head>

<body>



<form action="upload.php" method="post" enctype="multipart/form-data">

<input type="hidden" name="boxes" value="0" id="total" />

<p><a href="javascript:;" onclick="addUpload();">Add Upload Field</a></p>

<div id="myUploadContainer"> </div>

<div><input type='submit' value="Upload" /></div>

</form>

</body>

</html>

Now lets split it up and I'll explain it!

JS -

Code

function addUpload() {

var container = document.getElementById('myUploadContainer');

var num = document.getElementById('total');

var newNum = (num.value-1)+2;

num.value = newNum;

var uploadDiv = document.createElement('div');

var anotherBox = document.createElement('input');

var boxName = 'uploadBox_'+newNum;

anotherBox.setAttribute("type","file");

anotherBox.setAttribute("name",boxName);

uploadDiv.setAttribute("id",boxName);

uploadDiv.appendChild(anotherBox);

uploadDiv.innerHTML = uploadDiv.innerHTML+" <a href='#' onclick='removeField(\""+boxName+"\");'>[Remove Upload Box #"+newNum+"]</a>";

container.appendChild(uploadDiv);

}

This is the main function, the mine engine of the whole thing.
It gets the elements from the page and adds +1 to the hidden element, then it creates two new elements - input and div. It adds name & type to the input and id to div (so it could be removed later).
When it has created the elements it injects the input into div and div into the main div where the all upload fields will be.

Code



function removeField(fieldID){

var container = document.getElementById('myUploadContainer');

container.removeChild(document.getElementById(fieldID));

}

This function removes an upload field if you want it removed. It gets the main div where all the upload fields are, then gets the correct div (the one you want removed) ... and removes it!

Code



<form action="upload.php" method="post" enctype="multipart/form-data">

<input type="hidden" name="boxes" value="0" id="total" />

<p><a href="javascript:;" onclick="addUpload();">Add Upload Field</a></p>

<div id="myUploadContainer"> </div>

<div><input type='submit' value="Upload" /></div>

</form>

This is just a simple HTML form.. If you don't understand what the code does then please learn more HTML/JS.

Now for the upload script...

PHP Code

<?php

$count = $_POST['boxes']; // get the total number of upload fields

$uploadPath = 'someFolder/someSubFolder/';//path to the folder you want to upload to

// a simple for() loop to repeat upload action how many times it is needed

for($c = 1; $c <= $count; $c++){

$file = $_FILES['uploadBox_'.$c]['tmp_name']; // get the file

//check if the upload field isn't empty

if(!empty($file)){

//validate copy - return success message if the file's uploaded or a fail message

//if not!

if(copy($file, $uploadPath.$_FILES['uploadBox_'.$c]['name'])){

echo $_FILES['uploadBox_'.$c]['name']." uploaded successfully<br />";

}else{

echo "failed to copy ".$_FILES['uploadBox_'.$c]['name']."...<br />";

}

}

}

?>

I do not recommend using the script above as I created it only to show how the script works.
It is very unsafe!!!

You can see my script here!

Hope you find this tutorial useful, don't be afraid to ask questions!

Cheers, Friiks ! :)

Link:

CycloneNL Comments:0 Money:$0	Nice code, but there seems to be a flaw in it :) Say i add 3 boxes, Box1 Box2 and Box3. Now i remove Box2 and press the submit button. It will loop two times, once for Box1 and once for Box2. That obviously dosnt exists :P Havent tested it though. Wouldnt it be better to use a Foreach loop through $_FILES?
14th October 2008	\| Report
Friiks Comments:204 Money:$1000	Hmm, yeah, it would be a flaw if the total count of boxes would decrease on removing a box (which should probably be done) but it doesn't so you get the total count of boxes and all files will get uploaded :)
14th October 2008	\| Report
CycloneNL Comments:0 Money:$0	Yeah, you'll most likely want to check if that element exists in your for loop: Code for($c = 1; $c <= $count; $c++){ if(array_key_exists('uploadBox_'.$c,$_FILES)) { $file = $_FILES['uploadBox_'.$c]'tmp_name']; } } Otherwise you could get an error :P
16th October 2008	\| Report

Username:
Password:
not registered?

Downloads	1
Rating