专栏中心

EEPW首页 > 专栏 > HTML5实例之FileList对象实例代码

HTML5实例之FileList对象实例代码

发布人：扣丁学习时间：2020-11-13 来源：工程师

加入技术交流群
- 扫码加入
  和技术大咖面对面交流
  海量资料库查询

　　在很多平台上，我们需要上传文件的时候，每次都只能一次选择一个文件。如果想实现多文件上传，要么动态的增加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/>

　　</body>

　　</html>

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

专栏文章内容及配图由作者撰写发布，仅供工程师学习之用，如有侵权或者其他违规问题，请联系本站处理。联系我们

关键词：