Dynamic File Upload and Duplicate File Check

Click here to view Demo

File uploads can be added dynamically. Before files get uploaded ,inputs will be checked against duplicates.
(Here the file just copy to the folder,this post is mainly targeted duplicate validation)

file/folder structure

-upload(folder,this folder should be writable)
-upload.php
-upload.js

A folder named 'upload' is created and it should have read/write permission.



upload.php

<html>

<head>

<script language="javascript" src="upload.js">

</script>

</head>

<body>

<form name="frmUpload" method="post" enctype="multipart/form-data" onSubmit="return validateFiles();" action="">

<table>

<thead>

</thead>

<tbody>



<tr>

<td>

Select File <span id="star">*</span> :

</td>

<td>

<input type="file" name="file0" id="file0" />

<a onClick="addElement();" href="#" >Add more Files</a>

<div id="divfile0"></div>



</td>

</tr>



<tr>

<div id="theValue">

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

<td></td>

<td>



<div id="myDiv">

</div>

</div>

</td>

</tr>

<tr>

<td></td>

<td><input type="submit" name="btnSubmit" id="btnSubmit" value="Add"/><input type="reset" name="btnReset" id="btnReset" value="Reset" onclick="clearDiv()"/></td>

</tr>

</tbody>

</table>

</form>



</body>

</html>



<?php

if(isset($_POST['btnSubmit'])) {



$hdn = $_REQUEST['hdn'] + 1;



for($i=0;$i<=$hdn;$i++) {

$current_image =   $_FILES['file'.$i]['name'];

chmod("uploads",0777);

$destination="uploads/".$current_image;

$action = copy($_FILES['file'.$i]['tmp_name'], $destination);

}

echo "Uploaded";

?>

<script>

setTimeout("location.href = 'upload.php';",1000);

</script>

<?php

}



?>




upload.js

function validateFiles()

{

var error =0;

var fieldNames = new Array();

var searchFieldNames=new Array();

var numFile = parseInt(document.getElementById('hdn').value) + 1;



for(var i=0;i<numFile;i++){

var fileId =  'file'+i;

fieldNames[i] = document.getElementById(fileId).value;

searchFieldNames[i]=document.getElementById(fileId).value;

document.getElementById('divfile'+i).innerHTML ="";

}



for(var a=0;a<fieldNames.length;a++){

var string=fieldNames[a];

for (var i = 0; i < fieldNames.length; i++)

{

if(fieldNames[i] != ''){

if((fieldNames[i] == string) && (a!=i))

{

document.getElementById('divfile'+i).innerHTML ="Duplicate File";

error = error+1;

}

}

}

}



if(error>0){

return false;

}

}



function addElement() {

var setId = 0;

var hdnId = document.getElementById('hdn');

var newId = parseInt(hdnId.value) + 1;

var ni = document.getElementById('myDiv');



var numi = document.getElementById('theValue');

var num = (document.getElementById('theValue').value -1)+ 2;

numi.value = num;



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

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

hide.setAttribute("id", 'file'+newId);

hide.setAttribute("name", 'file'+newId);



var td = document.createElement('td');

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



divs.setAttribute("id", 'divfile'+newId);

divs.setAttribute("name", 'divfile'+newId);



ni.appendChild(hide);

ni.appendChild(td);

td.appendChild(divs);



hdnId.value = parseInt(hdnId.value)+1;



}