HTML5新特性之type=file文件上传功能
发布时间：2018-02-02 11:23:49 作者：佚名 
我要评论
我要评论这篇文章主要介绍了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、获取上传的文件信息
<!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>
显示：
更具体使用见MDN：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
总结
以上所述是小编给大家介绍的HTML5新特性之type=file文件上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
- 这篇文章主要介绍了HTML5拖拽文件上传的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2021-03-04
这篇文章主要介绍了HTML5 拖拽批量上传文件的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-28- HTML5 中提供的文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了 IE 只支持 IE10 以上的2017-07-03
- 本文简单介绍利用Html5的FormData实现文件的异步上传，还可以实现上传进度条和文件大小验证等，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-05-19
- 本篇文章主要介绍了HTML5拖拉上传文件的简单实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-11
- 下面小编就为大家带来一篇使用Html5实现异步上传文件,支持跨域,带有上传进度条。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-17
- 下面小编就为大家带来一篇移动端HTML5实现文件上传功能【附代码】。小编觉得听错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-03-25
- 多文件的上传在以前或许实现起来会很复杂，不过自从html5的出现，让其变得非常容易，下面有个不错的示例，大家可以参考下2014-02-13
- HTML5的上传API可以支持同时选择多个文件和选择单个文件夹，但不支持同时选择多个文件夹，本文就来实现一下HTML5实现同时选择多个文件夹上传的使用示例，具有一定的参考价2023-09-28
最新评论