communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > HTML5每日一练之FileList文件列表对象的应用

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

WBOY
Libérer： 2016-05-17 09:09:17
original
1736 Les gens l'ont consulté

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

  •    
  •         
  •         
  •    




Étiquettes associées：
admin ht
source：php.cn
Article précédent：HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(上) ... Article suivant：HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(下) ...
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Filtre d'expression régulière pour les champs de recherche et les cases à cocher de la pile MERN J'essaie de comprendre comment la pile MERN fonctionne ensemble en apprenant par la pratiq...
Depuis 2024-04-06 14:53:12
0
1
425
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Problème d'installation de Prestashop : Impossible d'installer le module personnalisé Je suis nouveau dans le développement de modules Prestashop. J'essaie de créer le premier ...
Depuis 2024-04-03 19:24:44
0
1
402
Tutoriel PHP : Comment télécharger du texte et des images sur Linkedin en utilisant PHP ? J'essaie de télécharger du texte, des images et des liens à l'aide de LinkedinsRestAPI (ht...
Depuis 2024-04-03 18:42:29
0
1
420
Impossible de recevoir des informations de ma base de données MySQL malgré avoir vu des tutoriels faisant exactement la même chose J'essaie donc de créer un programme qui lit et écrit dans une base de données MySQL, ce qu...
Depuis 2024-04-03 14:46:04
0
1
298
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal