Multiple Upload files using php and javascript

Hi Friends, in this post i would like to explain about multiple upload files using javascript and php code. We can find the complete code of javascript, HTML and PHP code.

Multiple Upload files using Javascript and PHP

Multiple Upload files using Javascript and PHP | Anil Labs

Javascript :

<script language="javascript" type="text/javascript">
var codeinputs = 0;
function addColorControl(){    
    var table = document.getElementById('multi_cons');    
    var tr = document.createElement('TR');    
    var td1 = document.createElement('TD');    
    var td2 = document.createElement('TD');    
    var td3 = document.createElement('TD');    
    var inp2 = document.createElement('INPUT');  
    var inp3 = document.createElement('SPAN');
    var inp4 = document.createElement('INPUT');
    var inp5 = document.createElement('SPAN');
    var max_codeinp = document.createElement('INPUT');    

    var img = document.createElement('IMG');        
    img.setAttribute('src', 'delete.gif');  
    img.setAttribute('alt', 'Remove');      
    img.onclick = function(){            
    removeCode(tr);        
    }        
    td1.appendChild(img);  

    tr.setAttribute('vAlign','top');

    var multi_code = "multi_code" +codeinputs;
    inp4.setAttribute('type','file');
    inp4.setAttribute('name',multi_code);
    inp4.setAttribute('id',multi_code);
    inp4.setAttribute('size','9');
    inp4.setAttribute('value','');

    max_codeinp.setAttribute('type','hidden');
    max_codeinp.setAttribute('name','max_codeinp');
    max_codeinp.setAttribute('id','max_codeinp');
    max_codeinp.setAttribute('value',codeinputs);

    inp3.innerHTML = '&nbsp;&nbsp;Image: ';
    inp5.innerHTML = '&nbsp;&nbsp;Color Name: ';

    var multi_name = "multi_code" +codeinputs;
    inp2.setAttribute('name',multi_name);
    inp2.setAttribute('id',multi_name);
    inp2.setAttribute('size','9');
    inp2.setAttribute('value','');

    table.appendChild(tr);    
    tr.appendChild(td1);    
    tr.appendChild(td2);    
    tr.appendChild(td3);
    td2.appendChild(max_codeinp);
    td2.appendChild(inp5);
    td2.appendChild(inp2);
    td2.appendChild(inp3);
    td2.appendChild(inp4);
    codeinputs++;
        }
  function removeCode(tr){
       tr.parentNode.removeChild(tr);
    }

</script>

HTML Code

Call this javascirpt functions in html code :

<form method="post" enctype="multipart/form-data">
<table>
<tbody id="multi_cons">
<tr valign="baseline">
<td colspan="3"><a href="javascript:addColorControl();" class="tahoma11boldblack">Add One</a></td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>

PHP Code

Below is the php code :

 <?php
if(isset($_POST))
{
extract($_POST);
echo $max_codeinp;
for($j=0;$j<=$max_codeinp;$j++) {
    $str_code = "multi_code".$j;
    $str_name = "multi_name".$j;
    if($$str_name != "") {
       $ext=explode(".",$_FILES[$str_code]['name']);
       $str=date("mdY_hms");
      if($ext[1]!="jpg" &#038;& $ext[1]!="png" &#038;& $ext[1]!="gif" &#038;& $ext[1]!="jpeg" &#038;& $ext[1]!="tif")
        {
        continue;
        }
      else
        {
        echo $new_imgname = $ext[0].$i."_".$str.".".$ext[1];
        if (is_uploaded_file($_FILES[$str_code]['tmp_name']))       {
        $updir = "images/";
        $uppath = $updir. $new_imgname;
        $upimageTemp_name = $_FILES[$str_code]['tmp_name'];
        //chmod($uppath, 0777);
        echo move_uploaded_file($upimageTemp_name,$uppath);
        }
        }
        }
        }
}
?>

Hope this will be useful.

Anil Kumar Panigrahi

With more than 10 years experience in PHP and Founder of Anil Labs, a blog for PHP and related posts. contributed posts regarding CodeIgniter, CakePHP and Learn PHP online ... Contact : [email protected]

You may also like...

2 Responses

  1. Rahul says:

    thanks a lllooootttt buddy for ur code…..its really works…. Nice Work .. 🙂

  1. July 6, 2011

    […] about how to add or remove file fields using jquery and upload using php code. In my previous code Multiple Upload files using php and javascript explained using simple javascript code. Now i will explain using jquery and with less code to […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.