Comment utiliser un composant d'interface utilisateur de téléchargement jQuery dans votre application Web

Découvrez comment ajouter et utiliser facilement un composant de téléchargement dans vos applications Web avec Kendo UI.

Dans cette partie de notre série, nous passons en revue le composant de Téléchargement de Kendo UI [. Le Upload permet aux utilisateurs de sélectionner des fichiers de leur système de fichiers à télécharger. Il s'agit d'une version améliorée de l'entrée de type de fichier HTML qui vous donne uniquement la possibilité d'autoriser la sélection d'un fichier ou de plusieurs fichiers. Avec l’interface de Kendo Upload vous pouvez également sélectionner des répertoires à télécharger, utiliser un glisser-déposer pour sélectionner des fichiers et valider vos fichiers, entre autres fonctionnalités. Vous pouvez utiliser ce composant pour créer une application de stockage de fichiers telle que DropBox ou un formulaire de courrier électronique acceptant les pièces jointes. À venir, je vais vous montrer comment utiliser le composant Upload pour sélectionner une image pour un avatar.

Mise en route

Pour cette tâche, nous voulons que les utilisateurs cliquent sur le bouton de sélection déclenchant le fichier. fenêtre du navigateur à ouvrir. Lorsque l'image est sélectionnée, elle apparaîtra immédiatement à l'écran. Nous souhaitons également limiter les fichiers pouvant être sélectionnés aux images et ne permettre qu'à un seul fichier d'être sélectionné. Avant d'implémenter ces fonctionnalités, nous allons initialiser un composant sans système d'exploitation. Par défaut, cela nous donnera un bouton de sélection nous permettant de choisir des fichiers à partir du navigateur de fichiers. Lorsque les fichiers sont sélectionnés, le nom du fichier avec une icône de fichier apparaît dans une liste de fichiers sous le bouton. Il existe également un bouton de suppression pour supprimer les fichiers de la liste. Si plusieurs fichiers sont sélectionnés, ils seront regroupés dans un bloc pouvant être supprimé.

 < html > 

 < head >  < meta   charset  =  " utf-8  " > 
	 < titre >  Télécharger  </  titre > 
	 < lien   ] rel  =  " feuille de style "    href  =  " https://kendo.cdn.telerik.com/2018.3. 911 / styles / kendo.bootstrap-v4.min.css  " > 
	 < link   rel  = "  feuille de style  ] ""    href  =  " https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css  " > 
	 < script   src  = "  https://code.jquery.com/jquery-1.12.3.min.js  " >    </  script > 
	 < script   src  =  " https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js "  >    </  script > 
	 < style >  
 body  {
			 famille de polices :  helvetica ; 
		} 
  </  style > 
 </  head > 

 < body > 
	 < forme > 
 < input   id  =  " télécharger "    type  =  " fichier  "   name  = "  photo  " 
 </  formulaire > 
	 < ] script >  
 $  ( document ) .  ready  ( function  ()  {
			 $  ] ( '# upload' ) .  kendoUpload  () ; 
		} ) ; 
  </  script > 
 </  body > 

 </  html > 

 

Configuration du composant

Ensuite, nous allons désactiver la sélection de plusieurs fichiers en définissant l'option multiple sur false . Pour limiter nos téléchargements aux images, nous allons définir les allowedExtensions dans l'option de validation . Nous pourrions également valider des fichiers en fonction de la taille de fichier minimale et maximale. L'ajout d'une validation empêchera l'utilisateur de télécharger des fichiers qui ne répondent pas aux critères et d'afficher un message d'erreur dans la liste des fichiers. Voici un exemple de l'erreur apparue lors de la mise à jour de notre code:

 $  ( '# upload' ) .  kendoUpload  ( {
multiple :   false 
validation :   {
allowedExtensions :   [ '. jpg'   'jpeg'   'png'   'gif' ] 
	} 
} ) ; 

L'utilisateur peut toujours sélectionner des fichiers restreints dans la fenêtre du navigateur. Si vous souhaitez éviter cela, vous pouvez ajouter l'attribut accept à votre entrée et définir les types de fichiers autorisés.

Aperçu de l'image

Nous avons besoin d'un élément conteneur pour ajouter l'élément sélectionné. à notre page. Cet élément sera stylé pour ressembler à un cercle afin de donner à l'image l'apparence d'une image de profil ou d'un avatar. Enfin, nous allons ajouter un écouteur d'événement select au composant. Le gestionnaire d'événements sera responsable de la lecture de l'image et de son ajout au conteneur. Voici les nouveaux styles et le code HTML pour l'aperçu de l'image:

 #preview   {
	 height :   10  em ; 
	 width  ]:   10  em ; 
	 marge :   1  em auto ; 
	 border-radius :   100% ; 
	 frontière :   1  px solide  #eee ; 
	 trop-plein :  caché ; 
. 
 .avatar   {
	 height :   10  de ; 
	 de largeur :   de   de  de [1945917]. ]; 
} 

 

 
 < div   id  =  " Aperçu "  >   </  div  > 

 

Nous allons ensuite ajouter l'événement select au composant. Cela nous permettra d’afficher l’image quand elle sera sélectionnée. Le gestionnaire d'événements effectuera les opérations suivantes:

1. Récupérer l'objet fichier de la liste de fichiers.

2. Initialiser un objet lecteur de fichiers.

3. Ajouter un écouteur d'événement onload au lecteur de fichiers.

4. Lire le contenu de la image.

Voici l'implémentation du gestionnaire d'événements select:

 $  ( '# upload' ) .  kendoUpload  ( ( (1965). 
	 ... 
select :  onSelect
} ) ; 

 function   surSelect  ( e )   {
	 var  fichier  = . ] e .  files  [ 0 ] .  rawFile ; 
	 var  lecteur  =   nouveau   FileReader  () ; 
reader .  onload   =   function  ()   {
		 var  img  =   $  19659091] '' ) ; 
		 $  ( '# preview' ) .  html  ( img ) ; 
img .  attr  ( 'src'   le .  résultat ) ; 
	] [
	}  ; 
reader .  readAsDataURL  (fichier  ) ; 
} 

Notre liste de fichiers est stockée dans un tableau. Étant donné que l'utilisateur ne peut sélectionner qu'un fichier, nous pouvons accéder à l'objet fichier en récupérant le premier élément du tableau. Un objet fichier aura le nom du fichier, son extension, sa taille en octets, un uid et une propriété nommée rawFile. L'objet FileReader nous permet de lire le contenu du fichier. La méthode readDataURL lit le contenu du fichier et déclenche l'événement onload. Le gestionnaire d'événement onload est l'endroit où nous pourrons obtenir l'URL de l'image à partir de la propriété result du FileReader. Le résultat est une URL vers l'image qui sera utilisée pour définir l'attribut src de l'image dans notre aperçu. Voici à quoi ressemble le résultat final:

Résumé

Nous avons créé notre aperçu d'image en ajoutant l'option multiple, la validation et un écouteur de sélection d'événements. L’écouteur d’événements a utilisé un objet FileReader disponible dans l’API Web du navigateur. Il est possible de télécharger des fichiers de manière synchrone ou asynchrone avec le composant Kendo UI Upload . Notre exemple utilisait le mode synchrone. En mode synchrone, les fichiers sont téléchargés lorsqu'ils sont soumis avec un formulaire. En mode asynchrone, votre serveur gère le téléchargement et la suppression de fichiers. Vous avez également plus de contrôle sur le processus de téléchargement. Les fichiers peuvent être suspendus et repris et vous pouvez télécharger des fichiers en morceaux. Cela est préférable lorsque les utilisateurs téléchargent des fichiers volumineux tels que vidéo et audio.

Le Upload peut également être utilisé avec d'autres composants tels que le ProgressBar . Dans le prochain article, vous apprendrez à utiliser un ProgressBar .

Essayez l’UI de Kendo pour vous-même

Vous souhaitez commencer à tirer parti des plus de 70 composants prêts à l'emploi de Kendo UI, comme la grille ou le planificateur? Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.

Commencer mon essai de l'interface utilisateur de Kendo

Versions angulaire, réactionnelle et vue

Vous recherchez un composant d'interface utilisateur prenant en charge des cadres spécifiques? Vérifiez Kendo UI pour Angular Kendo UI pour React ou Kendo UI pour Vue .

Ressources