input file上传文件扩展名限制

方法一(不推荐使用):用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"> 配合使用。它规定能够通过文件上传进行提交的文件类型。

提示:请避免使用该属性。应该在服务器端验证文件上传。

http://www.w3school.com.cn/tags/att_input_accept.asp

原文地址:https://www.cnblogs.com/suizhikuo/p/4959362.html