File upload with iframe

[tuga]

Hi i'm trying to upload several files with an iframe.

The user presses one button that executes showUploadBar() there are five with the code <a href="javascript:showUploadBar('1');">Upload 1</a>, <a href="javascript:showUploadBar('2);">Upload 2</a>, ... and so one.

A hidden element becomes visible with the following code

<div id="uploadBar">
<input type="hidden" name="MAX_FILE_SIZE" value="2097152" />
<input type="file" name="txtUpload" id="upload"/>
<input type="submit" value="Upload" name="btnUpload" id="btnUpload"/>
<input type="hidden" value="" id="hidFNumber" name="hidFNumber"/>
</div>

When the user presses the btnUpload the file is uploaded and the PHP does the work. The setTarget(id) is called.



function showUploadBar(id){
var hidFNumber = document.getElementById("hidFNumber");
hidFNumber.value = id;
var bar = document.getElementById("uploadBar");
bar.style.visibility="visible";
var iframe = document.getElementById("upload_target");
if (iframe.addEventListener) {
iframe.addEventListener("load", function (){uploadDone(id);}, false); // firefox
} else if (iframe.attachEvent) {
iframe.attachEvent("onload", function (){uploadDone(id);}); // IE
}
document.getElementById('frmEdit').onsubmit= function (){setTarget(id);};
}


function setTarget(id){
var id=document.getElementById("hidFNumber").value;
document.getElementById('frmEdit').target = 'upload_target';
var iframe = document.getElementById("upload_target");
iframe.removeEventListener("load", function (){uploadDone(id);}, false);
var img = document.getElementById("img"+id);
img.innerHTML='<img src="../images/img_loading.gif" width="32" height="32" style="margin-top:30px" />';
var bar = document.getElementById("uploadBar");
bar.style.visibility="hidden";
}

function uploadDone(id){
var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML;
var str = ret.split(",");
var imgCont = document.getElementById("img"+id);
imgCont.innerHTML ='<img src="../images/viaturas/thumbs/'+str[1]+'" width="140" height="105"/>';
var fileCont = document.getElementById("file"+id);
fileCont.innerHTML =str[2];

}

When i go for button 2 it replaces also the first image.

Any ideas how can i do this?

Thanks

[tuga]

I figured it out i needed several iframes for each file i was uploading but i still have to pass a parameter and don't want a function to execute.

I need to pass it here, when i add the event listener


function showUploadBar(id){
var iframe = document.getElementById("upload_target"+id);
if (iframe.addEventListener) {
iframe.addEventListener("load", function (){uploadDone(id)}, false); // firefox
} else if (iframe.attachEvent) {
iframe.attachEvent("onload", function (){uploadDone(id)}); // IE
}

}

Like that i can use the code:


function uploadDone(id){
var ret = frames['upload_target'+id].document.getElementsByTagName("body")[0].innerHTML;
var str = ret.split(",");
var imgCont = document.getElementById("img"+id);
imgCont.innerHTML ='<img src="../images/viaturas/thumbs/'+str[0]+'" width="140" height="105"/>';
var fileCont = document.getElementById("file"+id);
fileCont.innerHTML =str[1];
}

Plz help this newbie...
Thanks