sterckx Posted March 29, 2010 Share Posted March 29, 2010 Hi, I'm trying to create an upload instance ( comparable with gmail attachment's uploader). For some kind of reason i can't get 2 div's and one input field correctly append to a form, and append that for to a div: I hope that someone can help me. Php code: <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: <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> In attachment you can see what goes wrong, normally the new added input field (file) and the new progress bar should be in the blue border, under the first input file. You can see he adds the border, but without the input in it. Niels [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.