Home > Style & Scripts > JavaScript > Multiple Upload files using php and javascript

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.

You may also like
Website uptime monitoring using PHP script
Understanding the basic need of MVC architecture
How to convert feeds to html using javascript and php
Multi-language support for web application with MySql and PHP

2 Responses

  1. Pingback : how to add or remove file fields using jquery | ANIL KUMAR PANIGRAHI 's Blog

Leave a Reply

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