HTML5实例之FileList对象实例代码

2018-02-28 10:23:11 1091浏览

在很多平台上，我们需要上传文件的时候，每次都只能一次选择一个文件。如果想实现多文件上传，要么动态的增加file框要么使用Flash来代替。现在我们在HTML5中要想实现这个功能，是轻而易举的事情。今天就让扣丁学堂将具体如何实现多个文件连续上传的源代码编写如下，如有疑问，可以联系我们进行更改。

FileList对象：

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

HTML

<inputid="W3Cfuns_FileList"type="file"multiple/>

JavaScript

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

functionshowFileName()

{

varfile=document.getElementById("W3Cfuns_FileList");

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

{

alert(file.files.name);

}

}

完整的代码

<!DOCTYPEHTML>

<html>

<head>

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

<title>W3Cfuns_FileList</title>

<scripttype="text/javascript">

functionshowFileName()

{

varfile=document.getElementById("W3Cfuns_FileList");

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

{

alert(file.files.name);

}

}

</script>

</head>

<body>

<inputid="W3Cfuns_FileList"type="file"multiple/>

<button>提交</button>

</body>

</html>

纯代码的介绍对HTML5开发工程师来说，可谓是最美味的食物，像这样的纯干货我们扣丁学堂还有很多的库存，你的潜能在哪里？你比其他开发工程师的优势在哪里？只有选择我们扣丁学堂，才能真正学到超越其他人的本领，才能超出别人.那还等什么，赶紧加入我们扣丁学堂HTML5技术交流群:559883758。让我们在代码的世界里快乐的成长。

关注微信公众号获取更多学习资料