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选择器的研究(详解)
Sep 16 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
HTTP中的Content-type详解
Jan 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懒人函数 自动添加数据
2011/06/28 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
php车辆违章查询数据示例
2016/10/14 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
Python复制目录结构脚本代码分享
2015/03/06 Python
python制作朋友圈九宫格图片
2019/11/03 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
后勤主管工作职责
2013/12/07 职场文书
高三生物教学反思
2014/01/25 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
求职信怎么写
2014/05/23 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
授权委托书怎么写
2014/09/25 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android