Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Uploading unknown number of files using php & JS

max_file_size

  • Please log in to reply
6 replies to this topic

#1 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 07 January 2009 - 01:04 PM

In this tutorial ill show you how to upload numerous files on the server using JS and PHP.

You will not need to use mysql database because we will just copy the files into a directory on the server, this may not be a secure way to store files on your server but it’s much faster and helpful when you need to upload files with large size.
You can use a static html to upload files bu what if the user needs to upload more than one file and in the same time another user needs to upload just one file, that’s why we will use javascript to add content to the html page.
We have three files that ill explain in this tutorial:
1.Index.php :the page with the file controls
2.Javascript.js : the script that will be used to add files to the previous page
3.Upload.php: the php script that will upload and copy the files on the server

A.Index.php:
<html>
   <head>
   <title>uploading form</title>
   <script type="text/javascript" src="jscript.js"></script>
   </head>
   <body  style="text-align: center;color: white;background-color: gray;">
   <form action="upload.php" enctype="multipart/form-data" method="POST" >

   <input type="button" value="add file" onclick="addfile()" />
   <input type="button" value="remove file" onclick="removefile()" />
   
   <table id="tb" border="2" align="center">
   <thead>
   <tr>
   <td colspan="2">please choose files to upload</td>
   </tr>
   </thead>
   <tr><td>1.</td><td><input type="file" name="fileupload1" /></td></tr>
   </table>
    
   <input type="submit" value="upload the files" /> <input type="reset" value="clear fields" />
   <br/><br/>Amr Osama<br/>CodeCall.Net
   
   <input type="hidden" name="MAX_FILE_SIZE" value="100000000000000000000"/>
   <input  id="f_no" type="hidden" name="filesno" value="1"/>
   
  </form>
  </body>
  </html>
As you can see , it’s just a page that have 2 buttons at the top; “addfile” to add a file field to the table and “remove file”.
Notice that we have two hidden inputs:
1.MAX_FILE_SIZE: which determines the max size o uploaded files, you can set it to lower value to suit your needs
2.F_no :which holds number of file fields in the table

B.javascript.js:
Now let’s see the script that will be used to add fields to the table:
function addfile()
   {
       //reading number of current files and putting the number in a variable
       var filesno=document.getElementById("f_no").getAttribute("value");
       filesno++;//incrementing number of files
  
        var tbody = tb.tBodies.item(0);//storing the body content of the table into a variable
        var row = document.createElement("TR");//creating a row in a new ariable
        
        var td1 = document.createElement("TD");//creating  text node "td", with the value of number of files
        td1 .appendChild (document .createTextNode (filesno));
        
        var td3 = document.createElement("TD");//creating the input control and setting it's attribute
        var file=document.createElement ('<input>');
        file.setAttribute ('type','file');
        file.setAttribute ('name','fileupload'+filesno);
        td3 .appendChild (file );//adding the file control to the table data "td"

        //adding the "TD"s we created above to the row and adding the row to the table body 
        row.appendChild(td1);
        row.appendChild(td3);
        tbody.appendChild(row);
        
        //updating the hidden input with the new number of files
    document.getElementById("f_no").setAttribute("value",filesno);
   }
   
function removefile()
   {
   //reading the number of rows in the table, ten deleting the last row
   if(tb.rows.length>2){
   tb.deleteRow(tb.rows.length-1);
   document.getElementById("f_no").setAttribute("value",document.getElementById("f_no").getAttribute("value")-1);
   }
   
   }
The comments explains whats going on, no further explanation needed
http://forum.codecal...=1&d=1231361784

C.Upload.php:
Till this age the user will choose file paths and uploads them into the server on temporary files. This php script will read the temp files and copies them into a directory on the server
<html>
   <head>
   <title>upload results</title>
   </head>
 <body  style="text-align: center;color: white;background-color: gray;">
   <h1>File Upload Results</h1>
   <table border=2 align="center">
   <?php
   $filesno=$_POST["filesno"];
   $file_dir = "C:\\wamp\\uploadedfiles\\";

   for($i=1;$i<=$filesno;$i++)
   {
   $file_array=$_FILES["fileupload".$i];
   print "<tr><td colspan='2'  bgcolor='gray'>file no:$i</td></tr>";
    if($file_array['size']>0)
   {
// to adjust the size by kilobytes
   $file_array['size'] /=1024;

//printing simple file summary in the results table
   print "<tr><td>path:</td><td>".$file_array['tmp_name']."</td></tr>";
   print "<tr><td>name:</td><td>".$file_array['name']."</td></tr>";
   print "<tr><td>type:</td><td>".$file_array['type']."</td></tr>";
   print "<tr><td>size:</td><td>".$file_array['size']."kb</td></tr>";

//checking if theres a file uploaded
   if (is_uploaded_file($file_array['tmp_name'])) {
//if teres, the file is moved into the new directory 
  move_uploaded_file($file_array['tmp_name'],"$file_dir/$file_array[name]") or die ("Couldn't copy");
         print "<tr><td colspan='2'  bgcolor='green'>file was uploaded successfully!</td></tr>";
      }
   }
//if the wanted file wasn’t uploaded , this prints it out 
else print "<tr><td colspan='2'  bgcolor='red'>sorry,this file couldnt be uploaded</td></tr>";
   }
  ?>
  </table><h1>all files uploaded</h1>
  </body>
 </html>
In the beginning of the php script we read the number of files that we stored in the hidden input in the previous page and put it in a variable called filesno.
The “$file_dir” is the path you want to upload files on to it, you can set it to the server “www directory” so that the users can download the files directly from the sever.
Then we have a loop that will run “filesno” times:
In this loop we basically store the file array from the “$_FILES” array and process each file in the loop.
We check for the size of the file, if it’s a blank file we will not move it, if it’s size is bigger than 0 , we will display summary of the file in a table and move it into the new directory in this code:
move_uploaded_file($file_array['tmp_name'],"$file_dir/$file_array[name]") or die ("Couldn't copy");

If file cannot be mover or is blank we will display that in the results page.
http://forum.codecal...=1&d=1231361784

All files are attached, if you need help reply

Attached Thumbnails

  • 2.JPG
  • fail.JPG

Attached Files

  • Attached File  src.zip   1.99KB   717 downloads

  • 1
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript

#2 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 07 January 2009 - 07:20 PM

Another neat tutorial. This will come in handy for many PHP/HTML/JS beginners. +rep
  • 0

#3 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 08 January 2009 - 04:56 AM

thnx alot
tutorials help me find better ways to make my code perfect too
  • 1
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript

#4 Egz0N

Egz0N

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1155 posts

Posted 08 January 2009 - 05:11 AM

nice one amro .. +rep indeed! :)
  • 0

#5 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 08 January 2009 - 07:48 AM

thnx alot
tutorials help me find better ways to make my code perfect too


It is also a great way to learn and reinforce knowledge.
  • 0

#6 steve.avs

steve.avs

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 20 May 2010 - 04:38 AM

hi i tried using your code in my semester project. But i am facing a problem , only the first file gets uploaded. i have inspected the input components being created ,but there is nothing wrong with them. please advise.....

-Steve
  • 0

#7 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 20 May 2010 - 08:08 AM

did you modify the html inputs?
their name must be like "<any name>[]"
the "[]" makes it an array in the post global variable
  • 0
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript





Also tagged with one or more of these keywords: max_file_size

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download