HTML 标签 HTML <b>字体加粗 标签HTML <big> 大号字体 标签HTML <em> 强调标签HTML <strong> 重要事务标签HTML <dfn>定义实例标签HTML <code> 计算机代码 标签HTML <samp> 计算机输出 标签HTML <kbd> 用户输入 标签HTML <var> 变量 标签HTML <cite> 作品标题 标签HTML <i> 字体斜体 标签HTML <small> 侧记 标签HTML <sup>上标 标签HTML <sub>下标 标签HTML <ins>插入 标签HTML <del>删除 标签HTML <s>删除 标签HTML <strike> 删除标签HTML <u>下划线 标签HTML <tt>打印机文字 标签HTML <pre>预格式化的文本 标签HTML <abbr>缩写体 标签HTML <acronym>首字母缩写 标签HTML <address>联系信息 标签HTML <bdo>覆盖文本方向 标签HTML <blockquote> 长引用 标签HTML <q> 短引用 标签HTML <link> 外部资源 标签HTML <style> 样式标签HTML <title> 标题标签HTML <base>文档根 URL标签HTML <meta> 元数据标签HTML <script> 脚本标签HTML <noscript> 不支持脚本标签HTML <command> 定义命名标签HTML <head> 头部标签HTML <map> 图像映射标签HTML <img> 图像标签HTML <area> 图像映射区域标签HTML <a> 超链接标签HTML <div>块标签HTML <span>局部布局标签HTML <form> 表单 标签HTML <optgroup>选项组 标签HTML <option>选项 标签HTML <select> 下拉列表 标签HTML <datalist> 选项列表 标签HTML <input> 表单交互 标签 HTML <textarea> 多行文本 标签HTML <button> 按钮 标签 HTML <legend> 分组标题 标签HTML <fieldset> 分组 标签 HTML <label> 标识 标签 HTML <h1><h2><h3><h4><h5><h6>标题 标签HTML <hr> 水平线 标签HTML <ol> 有序列表 标签 HTML <li> 列表项 标签HTML <ul> 无序列表 标签HTML <dl>描述列表 标签HTML <dt>描述列表项目名 标签HTML <dd>描述列表子项目 标签HTML <output>输出 标签 HTML <p>段落 标签HTML <table>表格 标签HTML <tr>表格行 标签HTML <th>表标题 标签HTML <td>表单元格 标签HTML <caption>表名称 标签HTML <col>列属性 标签HTML <colgroup>列组合 标签HTML <thead>表格表头 标签HTML <tbody>表格主体 标签HTML <tfoot>表格底部 标签HTML <br>换行 标签HTML <object>对象 标签HTML <iframe>标签HTML <header> 区域页眉 标签HTML <footer> 区域页脚 标签HTML <article> 定义文章 标签HTML <section> 定义章节 标签HTML <canvas>绘制图形图像标签HTML <svg>矢量图形 标签HTML <source>媒体资源标签HTML <picture>图像资源标签 HTML <video>定义视频标签HTML <audio>定义音频标签HTML <applet>嵌入applet标签HTML <basefont>定义文档字体属性标签HTML <center>文字水平居中标签HTML <dir>目录列表标签HTML <font>字体样式标签HTML <frame>框架集窗口标签HTML <frameset>框架集标签HTML <noframes>不支持框架集文本标签HTML <wbr>换行符标签HTML <time>日期时间标签HTML <rp>不支持ruby显示内容标签HTML <rt>注释的解释标签HTML <ruby>注释标签HTML <progress>进度条标签HTML <nav>导航标签HTML <meter>计量标签HTML <mark>高亮文本标签HTML <figcaption>figure元素标题标签HTML <figure>独立内容标签HTML <summary>details元素标题标签HTML <dialog>对话框标签HTML <details>详细信息标签HTML <bdi>脱离文本方向标签HTML <aside>侧栏标签HTML <keygen>生成密钥标签HTML <track>外部字幕标签HTML <embed>嵌入内容标签HTML <main>主体部分 标签HTML <param>对象参数标签HTML <!DOCTYPE>声明HTML <!-- --> 注释标签

HTML <input>标签 accept属性

  HTML <input> 标签

accept 属性在打开文件选择器的时候,默认显示规定类型的文件,其它文件则不显示,进过测试此属性不具备限制上传文件类型的作用。建议在后端做限制。可参考PHP文件上传。

无accept属性的文件选择器

426H(AAVSQ3I0XW${66%%52.png

有accept属性并且限制为图像

不过可通过选择"所有文件(*.*)"来显示其它类型文件。

8ZSLQ5}]@_`]MQ6{ZE$T1{3.png

案例

出于安全考虑本案例不做在线演示

1565063015133785.gif

HTML文件:index.html

<!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>

PHP文件:input_accept.php

本内容已经超出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>"; 
                    }
                
            }
    }
?>

支持浏览器

ChromeIEFirefoxsafarioprea

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/*" />)。
accept属性值
描述
audio/*默认显示所有的声音文件。
video/*默认显示所有的视频文件。
image/*默认显示所有的图像文件。
MIME_type一个有效的 MIME 类型,不带参数。