JavaScript PHP Code

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.

2 thoughts on “Multiple Upload files using php and javascript”

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.