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:
- uploader.php - with the PHP script that gets and checks the files, and upload them on the server.
- upload.js - with the JavaScript code that sends the form data to the PHP script.
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.