js文件上传验证文件类型第一个为文本,第二个为MP3格式,第三个为jpg 如何动态验证求解

JavaScript029

js文件上传验证文件类型第一个为文本,第二个为MP3格式,第三个为jpg 如何动态验证求解,第1张

下面是一个完整的HTML文档,你可以复制后进行直接测试。

代码中有必要的注释:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>文件类定义</title>

</head>

<body>

<form method=post name=upform action="" enctype="multipart/form-data">

<div id="file" style="margin-top:60pxwidth:autohegiht:auto"></div>

<a href="javascript:void(0)" onclick="addUpload()">添加附件</a>

<span class="required"> 语音文件</span>

<input name="btn_up" class="cmd"  type="button" id="btn_up" value="上传"  style="cursor:hand" onclick="ajaxFileUpload(this.form, this.form.txt1.value)">

</form>

<script type="text/javascript">

var count= 0   

var maxfile = 3

//增加元素

function addUpload() { 

if(count >= maxfile) return//限制最多maxfile个文件框

count++

//自增id不同的HTML对象,并附加到容器最后

var newDiv =  "<div id=divUpload" + count +">"

+ "请选择上传的音频,图片,或文字,第"+count+"帧"

+ "<br/>"

//下面的每一个input中,都加入了onchange事件,用以在选择完新文件后对其进行判断

//同时第二参数用以限定本输入框中的文件类型

+ "文本:<input name=txt"+count+" type=file  maxlength=30 style=width:60% onchange='confirmType(this, \"txt\")' /><br/>"

+ "图片:<input name=img"+count+" type=file  maxlength=30 style=width:60% onchange='confirmType(this, \"img\")' /><br/>"

+ "MP3 :<input name=voice"+count+" type=file  maxlength=30 style=width:60% onchange='confirmType(this, \"voice\")' /><br/>"

+ "<input type=button value=删除 onclick=delUpload('divUpload" + count + "') />"

+ "</div>"

document.getElementById("file").insertAdjacentHTML("beforeEnd", newDiv)

}

function confirmType(th, ty){

var v = th.value

if(ty == 'txt' && /\.txt$/i.test(v)){ //如果是文本框

th.style.color = '#090' //正确为绿色显示

}else if(ty == 'img' && /\.jpg$/i.test(v)){ //如果是图片框

th.style.color = '#090' //正确为绿色显示

}else if(ty == 'voice' && /\.mp3$/i.test(v)){ //如果是MP3框

th.style.color = '#090' //正确为绿色显示

}else{

th.style.color = '#F00' //错误为红色显示

alert('您所选择的文件类型不正确')

}

}

</script>

</body>

</html>

思路是img标签中的dynsrc属性。

在FireFox、Chrome浏览器中可以根据document.getElementById(“id_file”).files[0].size 获取上传文件的大小(字节数),而IE浏览器中不支持该属性,只能借助<img>标签的dynsrc属性,来间接实现获取文件的大小(但需要同意ActiveX控件的运行,但是不会引起上面的不友好、不安全的提示)。

参考如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="DEscription" contect="my code demo" /> <meta name="Author" contect="Michael@www.micmiu.com" /> <meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /> <title>js check file size </title> </head> <body> <img id="tempimg" dynsrc="" src="" style="display:none" /> <input type="file" name="file" id="fileuploade" size="40" /> <input type="button" name ="check" value="checkfilesize" onclick="checkfile()"/></body> <script type="text/javascript"> var maxsize = 2*1024*1024//2M var errMsg = "上传的附件文件不能超过2M!!!" var tipMsg = "您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过2M,建议使用IE、FireFox、Chrome浏览器。" var browserCfg = {} var ua = window.navigator.userAgent if (ua.indexOf("MSIE")>=1){ browserCfg.ie = true }else if(ua.indexOf("Firefox")>=1){ browserCfg.firefox = true }else if(ua.indexOf("Chrome")>=1){ browserCfg.chrome = true } function checkfile(){ try{ var obj_file = document.getElementById("fileuploade") if(obj_file.value==""){ alert("请先选择上传文件") return } var filesize = 0 if(browserCfg.firefox || browserCfg.chrome ){ filesize = obj_file.files[0].size }else if(browserCfg.ie){ var obj_img = document.getElementById('tempimg') obj_img.dynsrc=obj_file.value filesize = obj_img.fileSize }else{ alert(tipMsg) return } if(filesize==-1){ alert(tipMsg) return }else if(filesize>maxsize){ alert(errMsg) return }else{ alert("文件大小符合要求") return } }catch(e){ alert(e) } } </script> </html>

判断客户端文件时,可以用 var fso,s=filespec// filespec="C:/path/myfile.txt" fso=new ActiveXObject("Scripting.FileSystemObject")if(fso.FileExists(filespec)) s+=" 文件存在."else s+=" 文件不存在."alert(s)判断服务器端(网...