通过客户端验证上传图片文件大小的ASP源码

<%@Language=JScript @CodePage=936%>

<Script Language=JScript RunAt=Server>

/****************************************************************\

<lostinet:source xmlns:lostinet="lostinet-d2g-com/source">

<lostinet:source-info>

  <lostinet:name>Lostinet_ASP_Upload的例子-动态表单部分</lostinet:name>

  <lostinet:description>一个动态的表单的例子</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>版权声明:这个软件可以随意发布。也可以根据具体情况进行优化修改。但是请保留作者的相关信息。</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发生不能处理的意外"));

}

function GetNamedItem(div,name)

{

return div.all(name);

throw(new Error(-11,"Impossible:GetNamedItem发生不能处理的意外"+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("描述的长度不能超过1000字");

  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("图片尺寸大于800X600");

  file.focus();

  return false;

}

if(preview.src.toLowerCase().indexOf("file://")!=0)

{

  alert("只能上传本地文件！！\n请把文件框的内容清楚\n然后按浏览");

  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("该输入框必须填上正确的内容");

    return event.returnValue=false;

   }

  }

}

if(haveItem==false)

{

  Add_FormItem();

  return event.returnValue=false;

}

if(totalSize==0)

{

  alert("不打算上传了");//暂时没有可能执行

  return event.returnValue=false;

}

if(totalSize>1024*1024)

{

  alert("不能上传超过1M的数据");

  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:当表单在提交的时候，忽略

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">添加一个需要上传的图片</BUTTON>

  <BUTTON ID="btn_submit">提交所有内容</BUTTON>

</DIV>

<DIV>

<FORM ID="form_submit" ACTION="e.g.jscript.action.asp" METHOD="POST" ENCTYPE="multipart/form-data" ONSUBMIT="Check_From()">

  <INPUT ID="input_submit" TYPE="submit" STYLE="display:none">

</FORM>

</DIV>

<FORM ID="form_template" STYLE="display:none;">

  <DIV CLASS="form_item">

   <DIV>

    要上传图片(<SPAN id="filesize"></SPAN>)的路径：    <BUTTON CLASS="delete" ONCLICK="Delete_FormItem()">删除</BUTTON>

   </DIV>

   <DIV STYLE="border:1px orange solid;width:200px;height:50px;overflow:hidden;" ONMOUSEOVER="OnPreviewMouseOver(this)" ONMOUSEOUT="OnPreviewMouseOut(this)" ONCLICK="OnPreviewClick(this)">

    <INPUT TYPE="hidden" NAME="width" VALUE="0">

    <INPUT TYPE="hidden" NAME="height" VALUE="0">

    <IMG ID="preview" STYLE="position:static" ONLOAD="OnPreviewLoad(true)" ONERROR="OnPreviewLoad(false)">

   </DIV>

   <DIV>

    <INPUT TYPE="file" NAME="file" CLASS="file" ONCHANGE="Show_Preview()">

   </DIV>

   <DIV>

    相关的描述：

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

通过客户端验证上传图片文件大小的ASP源码

相关文章

热门资讯