方法一(不推荐使用):用jS获获取扩展名进行验证:
<script type="text/javascript" charset="utf-8">
function change(e){
var src=e.target || window.event.srcElement; //获取事件源,兼容chrome/IE
src.style.background='red';
alert( src.value );
//测试chrome浏览器、IE6,获取的文件名带有文件的path路径
//下面把路径截取为文件名
var filename=src.value;
alert( filename.substring( filename.lastIndexOf('\')+1 ) );
//获取文件名的后缀名(文件格式)
alert( filename.substring( filename.lastIndexOf('.')+1 ) );
}
</script>
</head>
<body >
选择文件:
<br>
<input type='file' onchange="change(event);" >
</body>
方法二(好方法):
HTML <input> 标签的 accept 属性
实例
在文件上传中使用 accept 属性,本例中的输入字段可以接受 GIF 和 JPEG 两种图像:(上传选择文件时候,只显示这两种文件)
<form>
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg"
/>
</form>
如果不限制图像的格式,可以写为:accept="image/*"。
定义和用法
accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。
提示:请避免使用该属性。应该在服务器端验证文件上传。