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实现图片无间断轮播效果
Aug 25 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 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 fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php操作mongoDB实例分析
2014/12/29 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python 判断自定义对象类型
2009/03/21 Python
简单介绍Python中的RSS处理
2015/04/13 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
windows下python安装小白入门教程
2018/09/18 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python实现发送邮件
2021/03/02 Python
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
质检部部长职责
2013/12/16 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
门卫管理制度范本
2015/08/05 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript