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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
jQuery 操作XML入门
2008/12/25 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
js function定义函数使用心得
2010/04/15 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
python str与repr的区别
2013/03/23 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python如何读写json数据
2018/03/21 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python requests证书问题解决
2019/09/05 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
校园歌咏比赛主持词
2014/03/18 职场文书
法制宣传标语
2014/06/23 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
在校学生证明格式
2015/06/24 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
ICOM R71E和R72E图文对比解说
2022/04/07 无线电