accept 属性在打开文件选择器的时候,默认显示规定类型的文件,其它文件则不显示,进过测试此属性不具备限制上传文件类型的作用。建议在后端做限制。可参考PHP文件上传。
不过可通过选择"所有文件(*.*)"来显示其它类型文件。
出于安全考虑本案例不做在线演示
<!doctype html> <html> <head> <meta charset="utf-8"> <title>炫代码(www.xuandaima.com)</title> </head> <body> <form action="input_accept.php" method="post" enctype="multipart/form-data"> <input type="file" name="myfile" size="20" accept="image/*"/> <input class="two" type="submit" name="sub" value="上传" /> </form> </body> </html>
本内容已经超出HTML知识,可了解php知识,当然后端处理也可以使用其它后端语言如JSP、ASP等。
<?php //点击按钮时 if(isset($_POST['sub'])){ if($_FILES['myfile']['error']>0){ //判断文件是否可以上传到服务器 echo "上传错误:"; switch($_FILES['myfile']['error']){ case 1: echo "上传文件大小超出配置文件规定值"; break; case 2: echo "上传文件大小超出表单中约定值"; break; case 3: echo "上传文件不全"; break; case 4: echo "没有上传文件"; break; } }else{ $type=$_FILES['myfile']['name']; $types=strstr($type,'.');//截取字符串 //1024字节等于1KB 1024KB等于1MB 1024MB等于1GB if($_FILES["myfile"]['size'] > 0 && $_FILES["myfile"]['size'] < 1024 * 2000){//自定义限制大小 $dir = 'myfiles/'; //上传目录 $name = $_FILES["myfile"]['name']; $rand = rand(0,10000);//随机生成数 $name = $rand.@date('YmdHis').$name;//重新命名防止文件名重复 $path = 'myfiles/'.$name; if(!is_dir($dir)){//如果目录不存在 mkdir($dir);//新建目录 } $move = move_uploaded_file($_FILES["myfile"]['tmp_name'],$path); if($move == true){ echo "<script>alert('上传文件成功');</script>"; echo "上传文件明: " . $_FILES["myfile"]["name"] . "<br />"; echo "上传类型: " . $_FILES["myfile"]["type"] . "<br />"; echo "文件大小: " . ($_FILES["myfile"]["size"]) . " b(字节)<br />"; echo "副本的名称: " . $_FILES["myfile"]["tmp_name"]; } }else{ echo "<script>alert('上传文件过大');</script>"; } } } ?>
Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 6 支持 accept 属性。
注意:Internet Explorer 9 及之前的版本都不支持 <input> 标签的 accept 属性。
<input accept="audio/*|video/*|image/*|MIME_type">
![]() | 如需规定多个值,请使用逗号分隔(比如 <input accept="audio/*,video/*,image/*" />)。 |
值 | 描述 |
---|---|
audio/* | 默认显示所有的声音文件。 |
video/* | 默认显示所有的视频文件。 |
image/* | 默认显示所有的图像文件。 |
MIME_type | 一个有效的 MIME 类型,不带参数。 |