Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > HTML5每日一练之FileList文件列表对象的应用

HTML5每日一练之FileList文件列表对象的应用

WBOY
Release： 2016-05-17 09:09:17
Original
1735 people have browsed it

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

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

HTML





JavaScript
为了能够让大家看清楚这个上传文本框，简单的写了一下JS，通过它来遍历出filelist中的文件，JS看不懂的话也没有关系，在这里主要是为了演示此控件的确获取了多个文件。
  • function showFileName()
  • {
  •         var file = document.getElementById("W3Cfuns_FileList");
  •         for(var i = 0, j = file.files.length; i
  •         {
  •                alert(file.files.name);
  •         }
  • }



完整的代码
  •    
  •         
  •         W3Cfuns_FileList
  •         
  •         function showFileName()
  •         {
  •                         var file = document.getElementById("W3Cfuns_FileList");
  •                         for(var i = 0, j = file.files.length; i
  •                         {
  •                                      alert(file.files.name);
  •                         }
  •         }
  •         
  •    

  •    
  •         
  •         
  •    




Related labels：
admin ht
source：php.cn
Previous article：HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(上) ... Next article：HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(下) ...
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Regular expression filter for MERN stack search boxes and checkboxes I'm trying to understand how the MERN stack works together by learning by doing, and I'm f...
From 2024-04-06 14:53:12
0
1
425
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
Prestashop installation issue: Unable to install custom module I am new to Prestashop module development. I'm trying to build Amy's first prestashop modu...
From 2024-04-03 19:24:44
0
1
402
PHP Tutorial: How to upload text and images to Linkedin using PHP? I try to upload text, images and links using LinkedinsRestAPI (https://learn.microsoft.com...
From 2024-04-03 18:42:29
0
1
420
Unable to receive information from my mySQL database despite having seen tutorials doing the exact same thing So I'm trying to make a program that reads and writes to a MySQL database, which led me to...
From 2024-04-03 14:46:04
0
1
298
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template