HTML5新特性之type=file文件上传功能


Posted in HTML / CSS onFebruary 02, 2018

1、语法

<input name="myFile" type="file">

2、属性(以下三个仅HTML5支持,因此存在兼容性问题)

(1)multiple :表示用户是否可以选择多个值。multiple只能用于type=file和type=email。

(2)accept:服务器接受的文件类型,否则将被忽略。

音频/ *代表声音文件。仅HTML5支持
视频/ *代表视频文件。仅HTML5支持
图像/ *表示图像文件。仅HTML5支持

(3)required:此属性指定用户在提交表单之前必须填写一个值。

3、获取上传的文件信息

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>file multiple</title>
    </head>
    <body>
        <input type="file" multiple="multiple" id="test">
        <p id='content'></p>
        <script type="text/javascript">
            var test = document.getElementById('test');
            test.addEventListener('change', function() {
                var t_files = this.files;
                var str = '';
                for(var i = 0, len = t_files.length; i < len; i++) {
                    console.log(t_files[i]);
                    str += '<a href="javascript:void(0)">' + t_files[i].name + '</a><br/>';
                };
                document.getElementById('content').innerHTML = str;
            }, false);
        </script>
    </body>
</html>

显示:

HTML5新特性之type=file文件上传功能

更具体使用见MDN:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

总结

以上所述是小编给大家介绍的HTML5新特性之type=file文件上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 #HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 #HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 #HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 #HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 #HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 #HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 #HTML / CSS
You might like
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
php输出形式实例整理
2020/05/05 PHP
Javascript 二维数组
2009/11/26 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
babel基本使用详解
2017/02/17 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
vue多次循环操作示例
2019/02/08 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
python更新列表的方法
2015/07/28 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
优秀干部获奖感言
2014/01/31 职场文书
先进学校事迹材料
2014/12/30 职场文书
八达岭长城导游词
2015/01/30 职场文书
Android中View.post和Handler.post的关系
2022/06/05 Java/Android