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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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中创建并处理图象
2006/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
php生成gif动画的方法
2015/11/05 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
python列表去重的二种方法
2014/02/14 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
深入理解Python3 内置函数大全
2017/11/23 Python
django连接oracle时setting 配置方法
2019/08/29 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
和平主题的演讲稿
2014/01/12 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
公司费用报销管理制度
2015/08/04 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers