adekMultiUpload javascript

Javascript library, Adrian Kajda, kajda.com

Description

Some time ago I made a small javascript "ajax-like" function for my CMS for multi upload files. This is javascript part so you have to create the server side script later. For example you can use it for multi picture upload. The script is also checking for accepted extensions you define with the function. OK. Let's see the demo ...

Demo

Choose files to send (max. 5, accepted formats: .jpg, .gif):

Download

Current version 1.05.

Just download this javascript file: multiupload.js (right click and save as ...).

 

Tested browsers: Firefox, Opera, Safari, IE7, IE6.

How to use it

1. Include multiupload.js in your header.

<script type="text/javascript" src="js/multiupload.js"></script>

2. Create simple upload form and somewhere between form tags add adekMultiUpload init function. That's all! You should know only what are the function parameters (see next point).

<form enctype="multipart/form-data" name="uploadform" id="uploadform" action="PHP_UPLOAD_SCRIPT" method="post">
Choose files to send (max. 5, accepted formats: .jpg, .gif): <br/>
<input type="hidden" name="MAX_FILE_SIZE" value="33554432" />
<script type="text/javascript">
upload = new adekMultiUpload('uploadform',5,[".jpg",".gif"],'file');
upload.init();
</script>
<input style="padding:2px;margin:5px 0" name="action" type="submit" value="Send it!"/>
</form>

3. Function parameters.

In the example above I used some strange parameters. It's time for explanation.

upload = new adekMultiUpload('uploadform',5,[".jpg",".gif"],'file');

adekMultiUpload(param1, param2, param3, param4);

 

- param1 - this is your upload form name and id

- param2 - max files count.

- param3 - this is an array with accepted extensions (ex. [".jpg",".gif",".png"])

- param4 - file inputs name.

 

Param4 is mainly for your server side script. For example, if you are using PHP, if set this parameter to "file" then you should call your global variable $_FILES with this name (ex. $_FILES['file']['name'], $_FILES['file']['type']).

 

PHP_UPLOAD_SCRIPT in the example is the name of the server side scirpt responsible for upload. For PHP look at the manual (Handling file uploads).

Customizing, modifications.

You can add CSS file to customize your form,buttons, inputs or you can make some improvements in the javascript file. If you would like to share your modifications with others - please send it to me, I'll put it in this section.

Contact, report bugs

My mail: adrian.kajda@gmail.com.

License

It's an Open Source MIT license, so you can use it and modify it in every circumstance. Just leave the credits (information about author and link my page in javascript file) and don't blame me if something doesn't work.