本文摘自PHP中文网,作者小云云,侵删。
本文主要和大家介绍HTML5新特性之type=file文件上传功能,需要的朋友可以参考下,希望能帮助到大家。1、语法
<input name="myFile" type="file">
2、属性(以下三个仅HTML5支持,因此存在兼容性问题)
(1)multiple :表示用户是否可以选择多个值。multiple只能用于type=file和type=email。
(2)accept:服务器接受的文件类型,否则将被忽略。
音频/ *代表声音文件。仅HTML5支持
视频/ *代表视频文件。仅HTML5支持
图像/ *表示图像文件。仅HTML5支持
(3)required:此属性指定用户在提交表单之前必须填写一个值。
3、获取上传的文件信息
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!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文件上传功能实例详解
input[type=file]打开时慢、卡顿问题的解决办法
jQuery动态添加 input type=file的实现代码
以上就是HTML5之type=file文件上传功能的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
详解h5的自定义属性data-*
聊聊你可能不了解的css属性函数 attr()
基于 HTML5 canvas 实现的文字动画特效
h5中文件上传下载实例
h5怎样做出日历校验功能
HTML5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius
HTML5 canvas基本绘图之绘制线条
如何用h5实现拖放效果
如何使用css更改占位符颜色?(代码示例)
如何将 HTML5 性能发挥到极致
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5之type=file文件上传功能