Client-side validation upload file size

Source: Internet
Author: User
Tags contains file size return client

Through the client to verify upload image file size of the ASP source code

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>



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.