| 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> |
