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 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
sass 常用备忘案例详解
Sep 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
ftp类(example.php)
2006/10/09 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
laravel 数据验证规则详解
2019/10/23 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
ExtJs使用总结(非常详细)
2012/03/22 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
使用Python神器对付12306变态验证码
2016/01/05 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
安装docker-compose的两种最简方法
2019/07/30 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
珠宝店促销方案
2014/03/21 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
模范教师材料大全
2014/12/16 职场文书
实习工作表现评语
2014/12/31 职场文书
英文感谢信格式
2015/01/21 职场文书
超强台风观后感
2015/06/09 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python