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:
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”.Code:<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>
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:
The comments explains whats going on, no further explanation neededCode: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); } }
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
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.Code:<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>
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:
If file cannot be mover or is blank we will display that in the results page.Code:move_uploaded_file($file_array['tmp_name'],"$file_dir/$file_array[name]") or die ("Couldn't copy");
All files are attached, if you need help reply
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"
www.amrosama.com | the unholy methods of javascriptCode:eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
Another neat tutorial. This will come in handy for many PHP/HTML/JS beginners. +rep
thnx alot
tutorials help me find better ways to make my code perfect too
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"
www.amrosama.com | the unholy methods of javascriptCode:eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
nice one amro .. +rep indeed!
It is also a great way to learn and reinforce knowledge.Originally Posted by amrosama
Newbie
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
did you modify the html inputs?
their name must be like "<any name>[]"
the "[]" makes it an array in the post global variable
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"
www.amrosama.com | the unholy methods of javascriptCode:eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
LinkBack URL
About LinkBacks
Reply With Quote
Bookmarks