1. max number of files-you can modify this number but look for server timeout if you can change timeout value in php.ini file that ok

var max = 5;

2, delete button image-relative path to image depending of where is multifile.js located.

var delete_btn = ‘images/dcirc.gif’;

If you have multifile.js in same folder with file where you have form you have path:
var delete_btn = ‘your-file.gif’

if this file is in some folder inside folder where is file with your form located eg.folder img:
var delete_btn = ‘img/your-file.gif’

if this file is in some folder up level folder from where is file with your form located
eg.every level up is one   –> ../  <–

means file with your form is 3 levels up you have ../../../your-file.gif
var delete_btn = ‘../your-file.gif’

3. start files at zero, n o need to modify anything.

var upload_number = 0;

4. Now you can play with design if you do not like mine (look for Ajax doom CSS reference on net):

var container = document.createElement( ‘div’ );          -create div
container.style.border = “1px solid #000000″; -CSS div border
container.style.float = “left”; -CSS div float left
container.style.overflow  = “hidden”; -CSS div overflow for long filenames
you can use wordwarp but command
is not supported for some browsers
container.style.backgroundColor  = “#ffffff”; -CSS div background color
container.style.padding  = “3px”; -CSS div input filename padding
container.style.paddingLeft  = “10px”; -CSS div input filename padding
container.style.width  = “350px”; -CSS div container width

container.appendChild(document.createTextNode(’    upload image’));
-upload image you can change this
container.appendChild(document.createElement(’br’));
container.appendChild(document.createTextNode(filename)); -filename output
container.appendChild(document.createElement(’br’));

DELETE IMAGE CONTAINER:

var new_img_container = document.createElement( ‘div’ ); -create container
new_img_container.style.position  = “relative”; -container possition
new_img_container.style.left  = “270px”; -container possition LEFT
new_img_container.style.top  = “-1px”;

var new_row_button = document.createElement( ‘img’ );
new_row_button.src = delete_btn; -variable defined var delete_btn = ‘yourfile.gif’
new_row_button.style.verticalAlign = “middle”; -align of delete image
new_row_button.alt = ‘remove ‘+filename+’ from list’;

You can play with this code and change look and position. I copy this code from mine work so it can be that do not fit to your needs so test a little you will get what you need.

Download working source code: multi-upload.

In next post I will add progres bar and explain and add all complete code for uploading and image processing.

I modify some code so it looks like this:

STEP 1. Add path to javascript file in your page header.

<script type=’text/javascript’ language=’javascript’ src=’js/multifile.js’></script>

You can download file in zip file  included on end of this instructions.

STEP 2. Make upload form.

<form enctype=’multipart/form-data’ action=’page where you submit form‘ id=’form’ method=’post’ >

STEP 3. Make input field.

<input type=’file’ id=’file’ onChange=’addFileInput(this);’ />

STEP 4. Multifile field.

<div id=’file_div’  style=’ font-weight: bold; visibility: hidden;overflow:hidden’>
<div id=’file_list’ style=’float:left; width:60%;’ ></div>

you can change CSS code depending of your needs, but do not change all others.

Thanks for visiting us ….