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.

Demo

 
 

 
               

- 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.
 

uploader.php

<?php
/*** Script from: http://coursesweb.net/ajax/ ***/

$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;
}
?>
 

upload.js

/*** Script from: http://coursesweb.net/ajax/ ***/
 
// 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" />
</form>
<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 {
 position:relative;
 width:280px;
 margin:3px auto 15px 8px;
 text-align:center;
}
#uploadform input {
 display:block; 
 margin:3px auto;
}
--></style>
 

Details:

- 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

HTML
CSS
JavaScript
PHP-MySQL
Click on the HTML tag which creates an horizontal line in web page.
<br /> <em> <hr />
Some content ...
<hr />
Content under line ...
Which CSS property defines the text color?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Click on the function which searches if a character, or text exists in a string.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// isn`t in string");
else alert("http:// is in string");
Which function splits a string into an array of strings based on a separator?
array_merge() explode() implode()
$str = "apple,banana,melon,pear";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")
Multiple upload files

Last accessed pages

  1. Functions with Object and Array arguments (2091)
  2. Add and Remove HTML elements and Content with jQuery (21399)
  3. HTML object and param (8061)
  4. $_GET, $_POST and $_REQUEST Variables (24267)
  5. PuzzleImg - Script to Create Image Puzzle Game (1789)

Popular pages this month

  1. Qwop (3462)
  2. Drag Racer V3 (1707)
  3. Flash Games - Free online Games (810)
  4. Bubbles3 (809)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (758)