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字体效果的设置方法小结
Jun 13 HTML / CSS
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
CSS3的新特性介绍
Oct 31 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 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中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
浅析php学习的路线图
2013/07/10 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
wxPython学习之主框架实例
2014/09/28 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python中的列表和元组区别分析
2020/12/30 Python
集体生日活动方案
2014/08/18 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
股权转让协议范本
2014/12/07 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
投标售后服务承诺书
2015/04/29 职场文书
小学家长意见怎么写
2015/06/03 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL