Introduction
This is an Ajax script (with PHP and JavaScript) to upload multiple files at the same time, by adding multiple upload boxes in the form. This script is from coursesweb.net. This script can be implemented 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.
Instructions for Use
- Copy the files: "uploader.php", and "upload.js" on your server, in the same directory as the file in which you want to add this script.
- 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>
- 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 input {
display:block;
margin:3px auto;
}
</style>
- Also, study and test the file "test.html" (it must be run on server).
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 it CHMOD 0777 permissions.
- To change the extension type allowed for upload, modify the array in "
$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).
