The following is the source code: <% @Language =jscript @CodePage =936%> <script Language=jscript runat=server> /****************************************************************\ <lostinet:source xmlns:lostinet= "Lostinet-d2g-com/source" > <lostinet:source-info> Examples of <lostinet:name>lostinet_asp_upload-Dynamic form Section </lostinet:name> <lostinet:description> example of a dynamic form </lostinet:description> </lostinet:source-info> <lostinet:author-info> <lostinet:name>Lostinet</lostinet:name> <lostinet:email>lostinet@21cn.com;lostinet@chongjian.com;</lostinet:email> <lostinet:homepage>http://lostinet.d2g.com</lostinet:homepage> </lostinet:author-info> <lostinet:copyright-info> <lostinet:copyright> Copyright NOTICE: This software can be released at will. can also be modified according to the specific situation. However, keep the author's information relevant. </lostinet:copyright> </lostinet:copyright-info> </lostinet:source> \****************************************************************/ </Script> <script Runat=server language=jscript> </SCRIPT> <HTML> <HEAD> <title>jscript Example form</title> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> </HEAD> <STYLE> button { border:1px Gray Solid; } Div.form_item { width:500px; overflow-x:visible; padding:4px; margin-top:8px; border:2px Gray dotted; } Input.file { border:1px Gray inset; width:400px; } Textarea.info { border:1px Gray inset; width:400px; Scrollbar-face-color: #cccccc; Scrollbar-highlight-color:white; Scrollbar-shadow-color:white; Scrollbar-arrow-color:maroon; Scrollbar-track-color: #e0e4e4; Scrollbar-3dlight-color: #cccccc; Scrollbar-darkshadow-color: #cccccc; Scrollbar-base-color: #cccccc; } </STYLE> <SCRIPT> var countimgloading=0; function Getitemdiv (e) { while (e=e.parentelement) { if (e.classname.tolowercase () = = "Form_item") { return e; } } Throw (new Error ( -1, "Impossible:getitemdiv unexpected")); } function getNamedItem (div,name) { return Div.all (name); Throw (new Error ( -11, "Impossible:getnameditem Unexpected" +name)); } function Check_item (DIV) { var file=getnameditem (Div, "file"); var info=getnameditem (Div, "info"); var width=getnameditem (Div, "width"); var height=getnameditem (Div, "height"); var preview=getnameditem (Div, "preview"); if (File.value.replace (/\s/g, "") = "") { File.focus (); return false; } if (Info.value.replace (/\s/g, "") = "") { Info.focus (); return false; } if (info.value.length>1000) { Alert ("The length of the description cannot exceed 1000 words"); Info.focus (); return false; } if (height.value== "0" | | width.value== "0") { File.focus (); return false; } if (parseint (height.value) >800| | parseint (width.value) >600) { Alert ("Picture size greater than 800x600"); File.focus (); return false; } if (Preview.src.toLowerCase (). IndexOf ("file://")!=0) { Alert ("Only local files can be uploaded!!") \ n Please clear the contents of the File box and click Browse "); File.focus (); return false; } if (preview.filesize==0) { File.focus (); return false; } return preview.filesize; } function Check_form () { if (Event==null) var event=new Object (); var totalsize=0; var Haveitem=false; var Coll=form_submit.children; for (Var i=0;i<coll.length;i++) { var item=coll.item (i); if (item.className.toLowerCase () = = "Form_item") { Haveitem=true; Totalsize=check_item (Item); if (Totalsize==false) { Alert ("The input box must fill in the correct content"); return event.returnvalue=false; } } } if (Haveitem==false) { Add_formitem (); return event.returnvalue=false; } if (totalsize==0) { Alert ("No intention to upload");//temporarily not possible to execute return event.returnvalue=false; } if (totalsize>1024*1024) { Alert ("Cannot upload more than 1M of data"); return event.returnvalue=false; } Btn_submit.disabled=true; return event.returnvalue=true; } function Add_formitem () { Form_submit.elements ("Input_submit"). insertAdjacentHTML ("Beforebegin", form_template.innerhtml); } function Delete_formitem () { var btn=event.srcelement; Getitemdiv (BTN). Removenode (True); } function Show_preview () { var div=getitemdiv (event.srcelement); var preview=getnameditem (Div, "preview"); var file=getnameditem (Div, "file"); if (preview.readystate== "Uninitialized" | | preview.readystate== "Complate") countimgloading++; Btn_submit.disabled=true; Preview.src=file.value; } function Onpreviewload (secceed) { Btn_submit.disabled=false;//bug: When the form is submitted, ignore countimgloading--; var div=getitemdiv (event.srcelement); var preview=getnameditem (Div, "preview"); var height=getnameditem (Div, "height"); var width=getnameditem (Div, "width"); if (secceed) { Height.value=preview.height; Width.value=preview.width; } Else { height.value=width.value= "0"; } var filesize=getnameditem (Div, "filesize"); Filesize.innertext=math.floor (preview.filesize/1024) + "K"; } function Onpreviewmouseover (DIV) { if (Div.contains (event.fromelement)) return; var divitem=getitemdiv (DIV); var preview=getnameditem (Divitem, "Preview"); div.style.overflow= "visible"; preview.style.position= "Absolute"; } function Onpreviewmouseout (DIV) { if (Div.contains (event.toelement)) return; var divitem=getitemdiv (DIV); var preview=getnameditem (Divitem, "Preview"); Div.style.overflow= "hidden"; preview.style.position= "Static"; } function Onpreviewclick (DIV) { var divitem=getitemdiv (event.srcelement); var preview=getnameditem (Divitem, "Preview"); Div.style.overflow= "hidden"; preview.style.position= "Static"; } </SCRIPT> <BODY> <DIV> <button id= "Btn_add" > Add a picture that needs to be uploaded </BUTTON> <button id= "Btn_submit" > Submit all Content </BUTTON> </DIV> <DIV> <form id= "Form_submit" action= "e.g.jscript.action.asp" method= "POST" enctype= "Multipart/form-data" > <input id= "Input_submit" type= "Submit" style= "Display:none" > </FORM> </DIV>
<form id= "Form_template" style= "Display:none;" > <div class= "Form_item" > <DIV> To upload a picture (<span id= "filesize" ></SPAN>) path: <button class= "delete" > Delete </BUTTON> </DIV> <div style= "border:1px Orange Solid;width:200px;height:50px;overflow:hidden;" > <input type= "hidden" name= "width" value= "0" > <input type= "hidden" name= "height" value= "0" >
</DIV> <DIV> <input type= "File" name= "file" class= "file" > </DIV> <DIV> Related description: </DIV> <DIV> <textarea name= "Info" class= "info" rows= "4" ></TEXTAREA> </DIV> </DIV> </FORM> </BODY> <SCRIPT> Add_formitem (); function Btn_add.onclick () { Add_formitem (); } function Btn_submit.onclick () { if (Check_form ()) Form_submit.submit (); } </SCRIPT> </HTML> |