下面是一个完整的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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）