In this tutorial is presented an Ajax script (with PHP and JavaScript) that can be used to upload multiple files in the same time, by adding multiple uploading boxes in the form.
This script can be included and used in both HTML and PHP files, but the server must run PHP.
This Upload script uses the Ajax technology, the files are uploaded without opening or reloading the page, so a refresh will not resend any form data to the server.

Below you can see how it works. It is a demo only for test, and will not upload any file on the server.




- This script contains two main files: Below you can see the code for these files. Also, to download this script (including a testing file), click Script Multiple upload files.


/*** Script from: ***/

$updir = 'upload'; // Directory for uploads
$max_size = 500; // Sets maxim size allowed for the uploaded files, in kilobytes

// sets an array with the file types allowed
$allowtype = array('bmp', 'gif', 'htm', 'html', 'jpg', 'jpeg', 'mp3', 'pdf', 'png', 'rar', 'zip');

// if the folder for upload (defined in $updir) doesn't exist, tries to create it (with CHMOD 0777)
if (!is_dir($updir)) mkdir($updir, 0777);

/** Loading the files on server **/

$result = array(); // Array to store the results and errors

// if receive a valid file from server
if (isset ($_FILES['file_up'])) {
 // checks the files received for upload
 for($f=0; $f<count($_FILES['file_up']['name']); $f++) {
 $fup = $_FILES['file_up']['name'][$f]; // gets the name of the file

 // checks to not be an empty field (the name of the file to have more then 1 character)
 if(strlen($fup)>1) {
 // checks if the file has the extension type allowed
 $type = end(explode('.', strtolower($fup)));
 if (in_array($type, $allowtype)) {
 // checks if the file has the size allowed
 if ($_FILES['file_up']['size'][$f]<=$max_size*1000) {
 // If there are no errors in the copying process
 if ($_FILES['file_up']['error'][$f]==0) {
 // Sets the path and the name for the file to be uploaded
 $thefile = $updir . '/' . $fup;
 // If the file cannot be uploaded, it returns error message
 if (!move_uploaded_file ($_FILES['file_up']['tmp_name'][$f], $thefile)) {
 $result[$f] = ' The file could not be copied, try again';
 else {
 // store the name of the uploaded file
 $result[$f] = '<b>'.$fup.'</b> - OK';
 else { $result[$f] = 'The file <b>'. $fup. '</b> exceeds the maximum allowed size of <i>'. $max_size. 'KB</i>'; }
 else { $result[$f] = 'File type extension <b>.'. $type. '</b> is not allowed'; }

 // Return the result
 $result2 = implode('<br /> ', $result);
 echo '<h4>Files uploaded:</h4> '.$result2;


/*** Script from: ***/
// Function that adds a new box for upload in the form
function add_upload(form_id) {
 // Gets the element before which the new box will be added
 var element = document.getElementById('sub');

 // create the new "file" <input>, and its attributes
 var new_el = document.createElement("input");
 new_el.setAttribute("type", "file");
 new_el.setAttribute("name", "file_up[]");
 document.getElementById(form_id).insertBefore(new_el, element);

// Function that sends form data, by passing them to an iframe
function uploading(theform){
 // Adds the code for the iframe
 document.getElementById('ifrm').innerHTML = '<iframe id="uploadframe" name="uploadframe" src="uploader.php" frameborder="0"></iframe>';

 theform.submit(); // Executa trimiterea datelor

 // Restore the form
 document.getElementById('uploadform').innerHTML = '<input type="file" id="test" class="file_up" name="file_up[]" /><input type="submit" value="UPLOAD" id="sub" />';
 return false;

Usage Script Uploading Multiple files:

1) Create the files: "uploader.php", and "upload.js" on your server (with the code presented above), in the same directory as the file in which you want to add this script.

2) In your file (.html or .php) add the following code (that creates the upload form):
<div id="ifrm"> </div>
<form id="uploadform" action="uploader.php" method="post" enctype="multipart/form-data" target="uploadframe" onsubmit="uploading(this); return false">
 <input type="file" class="file_up" name="file_up[]" />
 <input type="submit" value="UPLOAD" id="sub" />
<script type="text/javascript" src="upload.js"></script>
<button onclick="add_upload('uploadform'); return false;">New upload box</button>

3) - Add the following CSS code, in the HEAD section of your HTML document (this makes the input form fields to be displayed one under the other).
<style type="text/css"><!--
#uploadform {
 margin:3px auto 15px 8px;
#uploadform input {
 margin:3px auto;


- The directory in which the files will be uploaded is named "upload" (you can change it in the "uploader.php" file, to "$updir" variable). You must create this folder on the server and set CHMOD 0777 permissions.
- To change the extension type of the files allowed for upload, modify the array in the "$allowtype" variable.
- To change the maxim size allowed for the uploaded files, in kilobytes, modify the value of the "$max_size" variable, initially 500 KB (the maxim size allowed for the uploaded files also depends on server settings).
See also the comments in the code of each file.

Daily Test with Code Example

Which meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Multiple upload files

Last accessed pages

  1. CSS3 transition (1488)
  2. AJAX and JSON (1075)
  3. XMLHttpRequest object (3553)
  4. AJAX Course, free Lessons (7723)
  5. List with JavaScript events (216)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1391)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1361)
  3. Contact page - CoursesWeb (1342)
  4. Tabs effect with CSS (1342)
  5. Insert, Select and Update NULL value in MySQL (843)