Upload file field and button : Upload Button : Form Control JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Form Control » Upload Button »

 

Upload file field and button



<html>
<head>
<title>DynAPI Examples - HTML File</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.api');
dynapi.library.include('TemplateManager');
dynapi.library.include('HTMLButton');
dynapi.library.include('HTMLFile');
</script>
<script language="Javascript">

var t  = 'This is the Template:<center><form><table border="1" width="150"><tr><td align="center">{@file}{@btnfile}<br><br>{@btnsend}</td></tr></table></form></center>';
var tp = new Template(t,100,100,350,200,'#EEEEEE');

// it seems that only IE supports the hidden mode
tp.addChild(new HTMLFile(null,((dynapi.ua.ie)true:false),20),'file');
tp.addChild(new HTMLButton(null,'Upload'),'btnsend');
tp.btnsend.onclick = function(e){
  alert('About to upload file "'+tp.file.getFileName()+'"');
};

if(dynapi.ua.ie) {
  tp.addChild(new HTMLButton(null,'Select a file'),'btnfile');
  tp.btnfile.addEventListener({
    onclick:function(e){ tp.file.browse() }
  });
};
dynapi.document.addChild(tp);

</script>
</head>
<body>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


           
       

Download : Download nav_dynapi.zip nav_dynapi.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Form Control
» Upload Button