javascrip客戶端驗(yàn)證文件大小及文件類型并重置上傳
更新時(shí)間:2011年01月12日 00:24:52 作者:
為了提高效率,很多時(shí)候需要在web頁(yè)面中對(duì)客戶端上傳的文件進(jìn)行驗(yàn)證,然后再上傳到服務(wù)器。
下面是我寫的一個(gè)通用的javascrip腳本,雖然調(diào)用時(shí)需要賦的參數(shù)比較多,但都是實(shí)際需要中真正需要使用到的。各位可以參考,并改成自己需要的腳本。
/*****獲取文件信息 edit by zhaogw 參考by misssionOtherAttEdit.jsp*****/
/*file:input type="file"的對(duì)象,一般用this。
vType:一個(gè)對(duì)象名,用于記錄文件的文件類型信息。一般為input對(duì)象。
DivType:一個(gè)Div對(duì)象的名稱。把其innerHTML內(nèi)容用于顯示文件的類型信息。
vFile:一個(gè)對(duì)象名,用于記錄文件的文件名信息。一般為input對(duì)象。
DivFile:一個(gè)Div對(duì)象的名稱。把其innerHTML內(nèi)容用于顯示文件的文件名信息。
vSize,DivSize同上面類似,只是記錄文件的大小信息。
mMaxSize:以m為單位計(jì)算其允許上傳的最大文件大小。
allowType:只接受的文件類型
*/
function getFileInfo(file,mMaxSize,allowType,vFile,DivFile,vType,DivType,vSize,DivSize){
var filePath = file.value;//文件路徑
var fileName;//文件名
var fileType;//文件類型
var tmpObj;//臨時(shí)對(duì)象
var notAllowType=new Array("exe","bat","asp","jsp","js","dll");
var mHTML=document.getElementById(file.name+'Td').innerHTML;
/*
var mHTML="<input type='file' name='"+
file.name+"' class='input100' id='"+file.id+
"' Tip='無(wú)法上傳空文件' contentEditable='false' tmt:required='true' focusTips='請(qǐng)輸入文件名' onChange='getFileInfo(this,"+
mMaxSize+",\""+allowType+"\",\""+vFile+"\",\""+DivFile+"\",\""+vType+"\",\""+DivType+"\",\""+vSize+"\",\""+DivSize+"\")'>";
*/
// alert(mHTML);
//get file name
if(filePath != null && filePath != ''){
var pass=true;
//文件類型
fileType = filePath.substring(filePath.lastIndexOf('.') + 1,filePath.length);
if (fileType!=null&&fileType!='')
{
for (var i in notAllowType){
if (fileType.toLowerCase()==notAllowType[i]){
pass=false;
break;}
}
}
//允許的類型,空的話就不設(shè)置允許類型
var match=false;
if (allowType!=null&&allowType!=''){
var allowList=allowType.split('|');
for (var j in allowList){
if (fileType.toLowerCase()==allowList[j].toLowerCase()){
match=true;
break;}
}
} else {match=true;}
if (pass&&match)
{
fileName = filePath.substring(filePath.lastIndexOf('\\') + 1,filePath.length);
tmpObj=document.getElementById(vType);
if (tmpObj!=null)
tmpObj.value = fileType;
tmpObj=document.getElementById(DivType);
if (tmpObj!=null)
tmpObj.innerHTML = fileType;
tmpObj=document.getElementById(vFile);
if (tmpObj!=null)
tmpObj.value = fileName;
tmpObj=document.getElementById(DivFile);
if (tmpObj!=null)
tmpObj.innerHTML = fileName;
try{
var fso,f,s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFile(file.value);
if(f.Size > mMaxSize*1048576){
alert("文件大小不能超過"+mMaxSize+"M");
document.getElementById(file.name+'Td').innerHTML = mHTML;
tmpObj=document.getElementById(vType);
if (tmpObj!=null)
tmpObj.value = '';
tmpObj=document.getElementById(DivType);
if (tmpObj!=null)
tmpObj.innerHTML = '';
tmpObj=document.getElementById(vFile);
if (tmpObj!=null)
tmpObj.value = '';
tmpObj=document.getElementById(DivFile);
if (tmpObj!=null)
tmpObj.innerHTML = '';
tmpObj=document.getElementById(vSize);
if (tmpObj!=null)
tmpObj.value = '';
tmpObj=document.getElementById(DivSize);
if (tmpObj!=null)
tmpObj.innerHTML = '';
return;
}
else
{
tmpObj=document.getElementById(vSize);
if (tmpObj!=null)
tmpObj.value = f.Size;
tmpObj=document.getElementById(DivSize);
if (tmpObj!=null)
tmpObj.innerHTML = f.Size+" byte(字節(jié))";
var imgType=new Array("jpg","jpeg","gif","bmp");
var isImg=false;
//文件類型
if (fileType!=null&&fileType!='')
{
for (var k in imgType){
if (fileType.toLowerCase()==imgType[k]){
isImg=true;
break;}
}
}
var tmpObj=document.getElementById("imgView");
if (isImg&&tmpObj){
var y = document.getElementById(file.name+"img");
if(y){
y.src = "file://localhost/" + file.value;
}else{
var img=document.createElement("img");
img.setAttribute("src","file://localhost/"+file.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id",file.name+"img");
tmpObj.appendChild(img);
}
}}
}catch(e){
//ignore
}
}
else if (!pass) {alert("不允許上傳文件類型為:"+fileType);document.getElementById(file.name+'Td').innerHTML = mHTML;}
else if (!match) {alert("只允許上傳文件類型為:"+allowType);document.getElementById(file.name+'Td').innerHTML = mHTML;}
}
}
調(diào)用方法的代碼:
<td width="23%" class="inputTd" id="fileNameTd" colspan="3">
<input type="file" name="fileName" class="input100" id="fileName" Tip="無(wú)法上傳空文件" Usage="notempty" contentEditable="false" tmt:required="true" focusTips="請(qǐng)輸入文件名" onChange="getFileInfo(this,10,'','vo.fileName','fileNameTd2','vo.fileType','fileTypeDiv','vo.fileSize','fileSizeDiv')">
<input type="hidden" name="vo.fileName" id="vo.fileName">
<span id="fileNameDiv" name="fileNameDiv"></span>
</td>
需要顯示當(dāng)前上傳圖片的需要加入以下代碼:
<div id="imgView"> </div>
簡(jiǎn)單說明下腳本的相關(guān)約定:
1:如必須使用<td>對(duì)象來(或者別的有innerHTML屬性的對(duì)象來包含著input的type="file"的對(duì)象,并且名稱必須是input的name屬性+"Td"為后綴)
2:imgView寫死了,由于不想再加入更多的參數(shù),因此,這里就固定這個(gè)了。大家也可以把名稱作參數(shù)傳遞進(jìn)去??锤魑坏姆奖懔恕?
3:所有參數(shù)都可以為''但第一個(gè)參數(shù)基本上是this。腳本會(huì)自動(dòng)去判斷相關(guān)的參數(shù)的。
復(fù)制代碼 代碼如下:
/*****獲取文件信息 edit by zhaogw 參考by misssionOtherAttEdit.jsp*****/
/*file:input type="file"的對(duì)象,一般用this。
vType:一個(gè)對(duì)象名,用于記錄文件的文件類型信息。一般為input對(duì)象。
DivType:一個(gè)Div對(duì)象的名稱。把其innerHTML內(nèi)容用于顯示文件的類型信息。
vFile:一個(gè)對(duì)象名,用于記錄文件的文件名信息。一般為input對(duì)象。
DivFile:一個(gè)Div對(duì)象的名稱。把其innerHTML內(nèi)容用于顯示文件的文件名信息。
vSize,DivSize同上面類似,只是記錄文件的大小信息。
mMaxSize:以m為單位計(jì)算其允許上傳的最大文件大小。
allowType:只接受的文件類型
*/
function getFileInfo(file,mMaxSize,allowType,vFile,DivFile,vType,DivType,vSize,DivSize){
var filePath = file.value;//文件路徑
var fileName;//文件名
var fileType;//文件類型
var tmpObj;//臨時(shí)對(duì)象
var notAllowType=new Array("exe","bat","asp","jsp","js","dll");
var mHTML=document.getElementById(file.name+'Td').innerHTML;
/*
var mHTML="<input type='file' name='"+
file.name+"' class='input100' id='"+file.id+
"' Tip='無(wú)法上傳空文件' contentEditable='false' tmt:required='true' focusTips='請(qǐng)輸入文件名' onChange='getFileInfo(this,"+
mMaxSize+",\""+allowType+"\",\""+vFile+"\",\""+DivFile+"\",\""+vType+"\",\""+DivType+"\",\""+vSize+"\",\""+DivSize+"\")'>";
*/
// alert(mHTML);
//get file name
if(filePath != null && filePath != ''){
var pass=true;
//文件類型
fileType = filePath.substring(filePath.lastIndexOf('.') + 1,filePath.length);
if (fileType!=null&&fileType!='')
{
for (var i in notAllowType){
if (fileType.toLowerCase()==notAllowType[i]){
pass=false;
break;}
}
}
//允許的類型,空的話就不設(shè)置允許類型
var match=false;
if (allowType!=null&&allowType!=''){
var allowList=allowType.split('|');
for (var j in allowList){
if (fileType.toLowerCase()==allowList[j].toLowerCase()){
match=true;
break;}
}
} else {match=true;}
if (pass&&match)
{
fileName = filePath.substring(filePath.lastIndexOf('\\') + 1,filePath.length);
tmpObj=document.getElementById(vType);
if (tmpObj!=null)
tmpObj.value = fileType;
tmpObj=document.getElementById(DivType);
if (tmpObj!=null)
tmpObj.innerHTML = fileType;
tmpObj=document.getElementById(vFile);
if (tmpObj!=null)
tmpObj.value = fileName;
tmpObj=document.getElementById(DivFile);
if (tmpObj!=null)
tmpObj.innerHTML = fileName;
try{
var fso,f,s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFile(file.value);
if(f.Size > mMaxSize*1048576){
alert("文件大小不能超過"+mMaxSize+"M");
document.getElementById(file.name+'Td').innerHTML = mHTML;
tmpObj=document.getElementById(vType);
if (tmpObj!=null)
tmpObj.value = '';
tmpObj=document.getElementById(DivType);
if (tmpObj!=null)
tmpObj.innerHTML = '';
tmpObj=document.getElementById(vFile);
if (tmpObj!=null)
tmpObj.value = '';
tmpObj=document.getElementById(DivFile);
if (tmpObj!=null)
tmpObj.innerHTML = '';
tmpObj=document.getElementById(vSize);
if (tmpObj!=null)
tmpObj.value = '';
tmpObj=document.getElementById(DivSize);
if (tmpObj!=null)
tmpObj.innerHTML = '';
return;
}
else
{
tmpObj=document.getElementById(vSize);
if (tmpObj!=null)
tmpObj.value = f.Size;
tmpObj=document.getElementById(DivSize);
if (tmpObj!=null)
tmpObj.innerHTML = f.Size+" byte(字節(jié))";
var imgType=new Array("jpg","jpeg","gif","bmp");
var isImg=false;
//文件類型
if (fileType!=null&&fileType!='')
{
for (var k in imgType){
if (fileType.toLowerCase()==imgType[k]){
isImg=true;
break;}
}
}
var tmpObj=document.getElementById("imgView");
if (isImg&&tmpObj){
var y = document.getElementById(file.name+"img");
if(y){
y.src = "file://localhost/" + file.value;
}else{
var img=document.createElement("img");
img.setAttribute("src","file://localhost/"+file.value);
img.setAttribute("width","120");
img.setAttribute("height","90");
img.setAttribute("id",file.name+"img");
tmpObj.appendChild(img);
}
}}
}catch(e){
//ignore
}
}
else if (!pass) {alert("不允許上傳文件類型為:"+fileType);document.getElementById(file.name+'Td').innerHTML = mHTML;}
else if (!match) {alert("只允許上傳文件類型為:"+allowType);document.getElementById(file.name+'Td').innerHTML = mHTML;}
}
}
調(diào)用方法的代碼:
復(fù)制代碼 代碼如下:
<td width="23%" class="inputTd" id="fileNameTd" colspan="3">
<input type="file" name="fileName" class="input100" id="fileName" Tip="無(wú)法上傳空文件" Usage="notempty" contentEditable="false" tmt:required="true" focusTips="請(qǐng)輸入文件名" onChange="getFileInfo(this,10,'','vo.fileName','fileNameTd2','vo.fileType','fileTypeDiv','vo.fileSize','fileSizeDiv')">
<input type="hidden" name="vo.fileName" id="vo.fileName">
<span id="fileNameDiv" name="fileNameDiv"></span>
</td>
需要顯示當(dāng)前上傳圖片的需要加入以下代碼:
<div id="imgView"> </div>
簡(jiǎn)單說明下腳本的相關(guān)約定:
1:如必須使用<td>對(duì)象來(或者別的有innerHTML屬性的對(duì)象來包含著input的type="file"的對(duì)象,并且名稱必須是input的name屬性+"Td"為后綴)
2:imgView寫死了,由于不想再加入更多的參數(shù),因此,這里就固定這個(gè)了。大家也可以把名稱作參數(shù)傳遞進(jìn)去??锤魑坏姆奖懔恕?
3:所有參數(shù)都可以為''但第一個(gè)參數(shù)基本上是this。腳本會(huì)自動(dòng)去判斷相關(guān)的參數(shù)的。
相關(guān)文章
用于判斷用戶注冊(cè)時(shí),密碼強(qiáng)度的JS代碼
原理及是根據(jù)輸入字符的類別,是字母,還是數(shù)字,大小寫等判斷,代碼 比較精簡(jiǎn),大家可以研究下。2009-01-01將光標(biāo)定位到textarea的某一行的javascript代碼
將光標(biāo)定位到textarea的某一行的javascript代碼...2007-04-04同一個(gè)表單 根據(jù)要求遞交到不同頁(yè)面的實(shí)現(xiàn)方法小結(jié)
同一個(gè)表單 根據(jù)要求遞交到不同頁(yè)面的實(shí)現(xiàn)方法,就是好多網(wǎng)站,可以百度一個(gè)表單可以搜索音樂,圖片等2009-08-08Javascript實(shí)現(xiàn)圖片不間斷滾動(dòng)的代碼
這篇文章主要分享一段js圖片不間斷滾動(dòng)的代碼,蠻優(yōu)秀的,需要的朋友可以參考下。2016-06-06