Baljeet
Member
- Jan 31, 2011
- 76
- 0
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".
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 needed
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.
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.
All files are attached, if you need help reply
All Credits goes to one who really made this...
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:
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:
Code:
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
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:
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.
All files are attached, if you need help reply
All Credits goes to one who really made this...
