Hallo,
Ik ben aan het proberen om een uploader met progressbar te maken, vergelijkbaar met die van gmail. Als ik een nieuw form wil aanmaken met een nieuwe input(file) loopt er iets mis.
Op de bijlage kan je zien dat hij het nieuw form toevoegt ( de border ), maar dat er niets inzit. De nieuwe input + progressbar zouden in dit nieuw form moeten steken, het lijkt erop alsof de append niet werkt...
Weet iemand wat ik verkeerd doe ?
Php code:
Javascript :
[JS]
<script type="text/javascript">
function callFunctions(){
document.getElementById('moreUploadsLink').style.display = 'block';
var formcount = "form" + (upload_number-1);
uploadForm(formcount, '4d46e2a1bf27bad15d63790e447bcc46' + formcount);
}
var upload_number = 1;
function addFileInput() {
//var divke = document.createElement("div");
var form = document.createElement("form");
var formname = "form" + upload_number;
form.setAttribute("id", formname); form.setAttribute("name", formname);
form.setAttribute("target", (formname + "_iframe"));
form.setAttribute("style", "border: 3px ridge #4B6192;");
var sid = "4d46e2a1bf27bad15d63790e447bcc46" + formname;
form.setAttribute("action", "upload.cgi?sID=" + sid);
form.setAttribute("enctype", "multipart/form-data" );
form.setAttribute("method", "POST");
var divprogressbox = document.createElement("div");
divprogressbox.setAttribute("class", "progressBox");
var divprogressbar = document.createElement("div");
divprogressbar.setAttribute("id", sid + "_progress");
divprogressbar.setAttribute("class", "progressBar");
divprogressbox.appendChild(divprogressbar);
form.appendChild(divprogressbox);
var divfile = document.createElement("div");
divfile.setAttribute("id", sid + "_fileName");
divfile.setAttribute("class", "fileName");
form.appendChild(divfile);
var inputfile = document.createElement("input");
inputfile.setAttribute("type", "file");
inputfile.setAttribute("id", "file" + upload_number);
inputfile.setAttribute("name", "file" + upload_number);
inputfile.setAttribute("class", "fileName");
inputfile.setAttribute("onchange", "callFunctions();");
form.appendChild(inputfile);
var iframe = document.createElement("iframe");
iframe.setAttribute("id", "form" + upload_number + "_iframe");
iframe.setAttribute("name", "form" + upload_number + "_iframe");
iframe.setAttribute("class","loader");
iframe.setAttribute("src", "blank.html");
document.getElementById("uploadforms").appendChild(form);
document.getElementById("uploadforms").appendChild(iframe);
upload_number++;
}
</script>
[/JS]
Ik ben aan het proberen om een uploader met progressbar te maken, vergelijkbaar met die van gmail. Als ik een nieuw form wil aanmaken met een nieuwe input(file) loopt er iets mis.
Op de bijlage kan je zien dat hij het nieuw form toevoegt ( de border ), maar dat er niets inzit. De nieuwe input + progressbar zouden in dit nieuw form moeten steken, het lijkt erop alsof de append niet werkt...
Weet iemand wat ik verkeerd doe ?
Php code:
PHP:
<body>
<div>
<div id="uploadforms" style="border: 3px ridge #FF2312; height: 10em; padding: .5em;">
<form METHOD="POST" enctype="multipart/form-data"
name="form0"
id="form0"
action="upload.cgi?sID=4d46e2a1bf27bad15d63790e447bcc46form0"
target="form0_iframe" style="border: 3px ridge #4B6192;">
<div class="progressBox">
<div style=""class="progressBar" id="4d46e2a1bf27bad15d63790e447bcc46form0_progress"> </div>
</div>
<div class="fileName" id="4d46e2a1bf27bad15d63790e447bcc46form0_fileName" style=" border: 3px ridge #4B6192;">
</div>
<input type="file" name="file0" id="file0" onchange="callFunctions();"/>
</form>
</div>
<div id="moreUploads" style="border: 2px solid #011F97; padding: .5em;"></div>
<div id="moreUploadsLink" style="border: 2px solid #4ED823; padding: .5em;"><a href="javascript:addFileInput();">Attach file</a></div>
<iframe name="form0_iframe" id="form0_iframe" src="blank.html" class="loader"></iframe>
</div>
</body>Javascript :
[JS]
<script type="text/javascript">
function callFunctions(){
document.getElementById('moreUploadsLink').style.display = 'block';
var formcount = "form" + (upload_number-1);
uploadForm(formcount, '4d46e2a1bf27bad15d63790e447bcc46' + formcount);
}
var upload_number = 1;
function addFileInput() {
//var divke = document.createElement("div");
var form = document.createElement("form");
var formname = "form" + upload_number;
form.setAttribute("id", formname); form.setAttribute("name", formname);
form.setAttribute("target", (formname + "_iframe"));
form.setAttribute("style", "border: 3px ridge #4B6192;");
var sid = "4d46e2a1bf27bad15d63790e447bcc46" + formname;
form.setAttribute("action", "upload.cgi?sID=" + sid);
form.setAttribute("enctype", "multipart/form-data" );
form.setAttribute("method", "POST");
var divprogressbox = document.createElement("div");
divprogressbox.setAttribute("class", "progressBox");
var divprogressbar = document.createElement("div");
divprogressbar.setAttribute("id", sid + "_progress");
divprogressbar.setAttribute("class", "progressBar");
divprogressbox.appendChild(divprogressbar);
form.appendChild(divprogressbox);
var divfile = document.createElement("div");
divfile.setAttribute("id", sid + "_fileName");
divfile.setAttribute("class", "fileName");
form.appendChild(divfile);
var inputfile = document.createElement("input");
inputfile.setAttribute("type", "file");
inputfile.setAttribute("id", "file" + upload_number);
inputfile.setAttribute("name", "file" + upload_number);
inputfile.setAttribute("class", "fileName");
inputfile.setAttribute("onchange", "callFunctions();");
form.appendChild(inputfile);
var iframe = document.createElement("iframe");
iframe.setAttribute("id", "form" + upload_number + "_iframe");
iframe.setAttribute("name", "form" + upload_number + "_iframe");
iframe.setAttribute("class","loader");
iframe.setAttribute("src", "blank.html");
document.getElementById("uploadforms").appendChild(form);
document.getElementById("uploadforms").appendChild(iframe);
upload_number++;
}
</script>
[/JS]
