通過客戶端驗證上傳圖片文件大小的ASP源碼-巨人網絡通訊

主頁 > 知識庫 > 通過客戶端驗證上傳圖片文件大小的ASP源碼

通過客戶端驗證上傳圖片文件大小的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;icoll.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>)的路徑：nbsp;nbsp;nbsp;nbsp;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源碼》，本文關鍵詞通過,客戶端,驗證,上傳,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。