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+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php横向重复区域显示二法
2008/09/25 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python编程之序列操作实例详解
2017/07/22 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
小学美术教学反思
2014/02/01 职场文书
应届毕业生求职信
2014/05/26 职场文书
公司周年庆活动方案
2014/08/25 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
婚宴领导致辞
2015/07/28 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android