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

JavaScript08

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>

<input type="submit" name="button" id="button" onsubmit="return getPhotoSize(obj)" value="提交" />