Ajax Course

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: https://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: https://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
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Multiple upload files

Last accessed pages

  1. MouseEvent - Events for Mouse (2910)
  2. PHP getElementById and getElementsByTagName (49442)
  3. Viewing the Flash Window (2936)
  4. PHP Unzipper - Extract Zip, Rar Archives (32245)
  5. CSS cursor property - Custom Cursors (6092)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (473)
  2. CSS cursor property - Custom Cursors (80)
  3. The Mastery of Love (70)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (62)
  5. CSS3 2D transforms (46)