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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 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 身份验证方面的函数
2009/10/11 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
浅谈angularJS 作用域
2015/07/05 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
高中自我鉴定范文
2013/11/03 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
2014年销售工作总结
2014/12/01 职场文书
太行山上观后感
2015/06/05 职场文书
《落花生》教学反思
2016/02/16 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
python和anaconda的区别
2022/05/06 Python