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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
iscroll.js滚动加载实例详解
2017/07/18 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python感知机实现代码
2019/01/18 Python
python实现简单图片物体标注工具
2019/03/18 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
如何利用python发送邮件
2020/09/26 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
质检部岗位职责
2013/11/11 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书