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制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Python调用C语言开发的共享库方法实例
2015/03/18 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
销售助理岗位职责
2014/02/21 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
网吧员工管理制度
2015/08/05 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript