Ajax multifile upload-mine copied way-part two… 4 comments

OK we continue now staring explain JavaScript file.

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.