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中Transform动画属性用法详解
Jul 04 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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函数详解,mysql和php交互函数
2011/05/19 PHP
php中this关键字用法分析
2016/12/07 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
JS原生瀑布流效果实现
2019/04/26 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
Python实现在线音乐播放器
2017/03/03 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
django 模版关闭转义方式
2020/05/14 Python
python爬虫可以爬什么
2020/06/16 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
高校优秀辅导员事迹材料
2014/05/07 职场文书
经销商年会策划方案
2014/05/29 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
《将心比心》教学反思
2016/02/23 职场文书
Ruby处理YAML和json数据
2022/04/18 Ruby