HTML5实例教程：FileList对象实例代码-HTML教程-爱易网页

HTML5实例教程：FileList对象实例代码

日期：2013-12-21　浏览次数：20702 次

网页制造aiyiweb文章简介：在过去，上传文件的时候，我们每次都只能一次选择一个文件。如果想实现多文件上传，要么动态的添加file框要么使用Flash来代替。如今我们在HTML5中要想实现这个功用，是轻而易举的事情。

在过去，上传文件的时候，我们每次都只能一次选择一个文件。如果想实现多文件上传，要么动态的添加file框要么使用Flash来代替。如今我们在HTML5中要想实现这个功用，是轻而易举的事情。

FileList对象：
FileList对象，其实就是多个file对象的列表。在HTML5中要想多文件上传我们只需求在原有的file类型的Input中加入multple属性即可。

HTML

<input id="W3Cfuns_FileList" type="file" multiple/>

JavaScript
为了能够让大家看清楚这个上传文本框，简单的写了一下JS，通过它来遍历出filelist中的文件，JS看不懂的话也没有关系，在这里次要是为了演示此控件的确获取了多个文件。

function showFileName()
{
var file = document.getElementById("W3Cfuns_FileList");
for(var i = 0, j = file.files.length; i < j; i++)
{
alert(file.files.name);
}
}

完整的代码

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>W3Cfuns_FileList</title>

<script type="text/javascript">

function showFileName()

{

var file = document.getElementById("W3Cfuns_FileList");

for(var i = 0, j = file.files.length; i < j; i++)

{

alert(file.files.name);

}

}

</script>

</head>

<body>

<input id="W3Cfuns_FileList" type="file" multiple/>

<button>提交</button>

</body>

</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

HTML5实例教程：FileList对象实例代码

相关资料更多>

推荐阅读更多>