Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > HTML5每日一练之FileList文件列表对象的应用

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

WBOY
Freigeben： 2016-05-17 09:09:17
Original
1736 Leute haben es durchsucht

在过去，上传文件的时候，我们每次都只能一次选择一个文件。如果想实现多文件上传，要么动态的增加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);
  •                         }
  •         }
  •         
  •    

  •    
  •         
  •         
  •    




Verwandte Etiketten：
admin ht
Quelle：php.cn
Vorheriger Artikel：HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(上) ... Nächster Artikel：HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(下) ...
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Regulärer Ausdrucksfilter für MERN-Stack-Suchfelder und Kontrollkästchen Ich versuche durch Learning by Doing zu verstehen, wie der MERN-Stack zusammenarbeitet, un...
Aus 2024-04-06 14:53:12
0
1
425
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Problem bei der Prestashop-Installation: Das benutzerdefinierte Modul kann nicht installiert werden Ich bin neu in der Prestashop-Modulentwicklung. Ich versuche, Amys erstes Prestashop-Modul...
Aus 2024-04-03 19:24:44
0
1
402
PHP-Tutorial: Wie lade ich Texte und Bilder mit PHP auf Linkedin hoch? Ich versuche, Texte, Bilder und Links mit LinkedinsRestAPI (https://learn.microsoft.com/en...
Aus 2024-04-03 18:42:29
0
1
420
Ich kann keine Informationen aus meiner MySQL-Datenbank empfangen, obwohl ich Tutorials gesehen habe, die genau das Gleiche tun Ich versuche also, ein Programm zu erstellen, das eine MySQL-Datenbank liest und schreibt,...
Aus 2024-04-03 14:46:04
0
1
298
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage