通过客户端验证上传图片文件大小的ASP源码
程序员文章站
2023-01-25 15:53:19
<%@language=jscript @codepage=936%>
<%@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>
<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>
上一篇： JSP针对表单重复提交的处理方法
下一篇： JSP实现的简单分页示例