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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
css3手动实现pc端横向滚动
Jun 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
短波的认识
2021/03/01 无线电
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
用PHP实现多级树型菜单
2006/10/09 PHP
MySQL相关说明
2007/01/15 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
浅谈python迭代器
2017/11/08 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python如何实现强制数据类型转换
2019/11/22 Python
土木工程个人自荐信范文
2013/11/30 职场文书
业务员岗位职责范本
2013/12/15 职场文书
医院辞职信范文
2014/01/17 职场文书
函授本科自我鉴定
2014/02/04 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2015年技术员工作总结
2015/04/10 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
教师节领导致辞
2015/07/29 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
Python之matplotlib绘制饼图
2022/04/13 Python