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 相关文章推荐
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 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之PHP语法学习笔记1
2006/12/17 PHP
优化PHP代码的53条建议
2008/03/27 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
JS中Location使用详解
2015/05/12 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
详谈js模块化规范
2017/07/07 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 数据结构之队列的实现
2017/01/22 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python制作抽奖程序代码详解
2021/01/15 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
关于.NET, HTML的五个问题
2012/08/29 面试题
商务英语应届生自我鉴定
2013/12/08 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
爱国主题班会教案
2015/08/14 职场文书
趣味运动会标语口号
2015/12/26 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Python os和os.path模块详情
2022/04/02 Python