Hello every one never really used a board for something like this but my java is a little limited so i need some help here if possible!

I have a page with 5 file inputs and 5 img tags i have everything working but preview of course changes all the img tags so no madder what browse button i choose all fixed img tags are updated with that preview.

here is a code i found and messed with a little cant seem to figure out how to add a loop or something to update just the called tag if any one could help :)

Java Script:

<script type="text/javascript">
<!-- Begin
/***** CUSTOMIZE THESE VARIABLES *****/
// width to resize large images to
var maxWidth=115;
// height to resize large images to
var maxHeight=115;
// valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
// the id of the preview image tag
var outImage="previewField";
// what to display when the image is not valid
var defaultPic="/images/evolve/badpic.jpg";
/***** DO NOT EDIT BELOW *****/
function preview(what){
var source=what.value;
var ext=source.substring(source.lastIndexOf(".")+1,sou rce.length).toLowerCase();
for (var i=0; i<fileTypes.length; i++){
if (fileTypes[i]==ext){
break;
}
}
globalPic=new Image();
if (i<fileTypes.length){

//FireFox
try{
globalPic.src=what.files[0].getAsDataURL();
}catch(err){
globalPic.src=source;
}
}else {
globalPic.src=defaultPic;
alert(fileTypes.join(", "));
}
setTimeout("applyChanges()",200);
}

var globalPic;
function applyChanges(){
var field=document.getElementById(outImage);
var x=parseInt(globalPic.width);
var y=parseInt(globalPic.height);
if (x>maxWidth) {
y*=maxWidth/x;
x=maxWidth;
}
if (y>maxHeight) {
x*=maxHeight/y;
y=maxHeight;
}
field.style.display=(x<1 || y<1)?"none":"";
field.src=globalPic.src;
field.width=x;
field.height=y;
}
// End -->

previewField is the key i think and also of course the imageout jsut dont know how to go about making the loop if this was perl no problem but like stated above i know little about java coding but minor changes.

below here is the some of the form code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
</tr>
</table>

also ther is one include:

<script type="text/javascript" src="/java/si.files.js"></script>

i went through this code file and the change does not appear to be where the change should ocur im sure its in the actually script need to loop through the images[] field i would think like i would in php

The only thing i could think to do is paste the script code 5 more times and change each variable to 1 2 3 4 5 but then ill have a big php code page there would be a way to make this work i would think

Thanks all and im here for PHP or Perl questions so any help would be great!