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 HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Multiple upload files

Last accessed pages

  1. JavaScript Course - Free lessons (31647)
  2. Volume and Surface Area Calculator for 3D objects (11276)
  3. Using v-model in form input fields (1051)
  4. jQuery UI draggable - Drag elements (11445)
  5. Display data from PHP Array, or MySQL in HTML table (26980)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (310)
  2. The Mastery of Love (48)
  3. CSS cursor property - Custom Cursors (36)
  4. Read Excel file data in PHP - PhpExcelReader (35)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (31)