Comment obtenir le nom, le type et la taille du fichier téléchargé à l'aide de jquery

Cette fois, je vais vous montrer comment utiliser jquery pour obtenir le nom, le type et la taille du fichier téléchargé. Quelles sont les précautions concernant l'utilisation de jquery pour obtenir le nom, le type et la taille du fichier téléchargé. fichier Ce qui suit est un cas pratique. Jetons un coup d'oeil.

Normalement, lorsque les utilisateurs téléchargent des fichiers via la balise , nous pouvons voir le nom du fichier téléchargé. L'API de fichiers HTML5 nous offre un moyen sécurisé d'accéder aux fichiers sur l'ordinateur côté client et de mieux effectuer des opérations sur ces fichiers.

Les navigateurs prenant en charge l'API de fichiers incluent IE10+, Firefox4+, Safari5.0.5+, Opera11.1+ et Chrome.

L'API de fichiers ajoute des interfaces pour un accès direct aux informations du fichier en fonction du champ de saisie du fichier du formulaire. HTML5 ajoute une collection de fichiers au DOM pour les éléments d'entrée de fichiers. Lorsqu'un ou plusieurs fichiers sont sélectionnés via le champ de saisie de fichier, la collection de fichiers contient un ensemble d'objets File, chaque objet File correspondant à un fichier. Chaque fichier possède les attributs en lecture seule suivants :

• name : Le nom du fichier dans le système de fichiers local .

• size : Le nombre d'octets dans le fichier.

• type : type MIME du fichier.

• lastModifiedDate : L'heure à laquelle le fichier a été modifié pour la dernière fois.

Grâce à cette interface de fichiers, nous pouvons obtenir le nom, le type et la taille du fichier téléchargé dans jquery. Découvrez l'effet à travers la démo ci-dessous.

1. Utilisez le bouton « Sélectionner un fichier » pour sélectionner le fichier à télécharger. Vous pouvez sélectionner plusieurs fichiers.

2. Après avoir sélectionné le fichier, cliquez sur le bouton « Afficher les informations détaillées du fichier téléchargé » pour afficher les informations détaillées du fichier.

Pour télécharger plusieurs fichiers en même temps, vous devez ajouter l'attribut multiple dans la balise Téléchargement de fichiers. La structure HTML de la démo ci-dessus est la suivante :

<input id="fUpload" multiple type="file" /><br />
<ul id="ulList">
</ul>
<input id="btnShow" type="button" value="显示上传文件的详细详细" />

Dans le code jquery, le nombre de fichiers sélectionnés est d'abord détecté, puis les informations détaillées de chaque fichier sont obtenues via une boucle. Le code jquery complet est le suivant :

$("#btnShow").on('click', function () {
  $("#ulList").empty();
  var fp = $("#fUpload");
  var lg = fp[0].files.length; // get length
  var items = fp[0].files;
  var fragment = "";
   
  if (lg > 0) {
    for (var i = 0; i < lg; i++) {
      var fileName = items[i].name; // get file name
      var fileSize = items[i].size; // get file size 
      var fileType = items[i].type; // get file type
 
      // append li to UL tag to display File info
      fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
    }
 
    $("#ulList").append(fragment);
  }
});

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment utiliser bootstrap dans un projet vue-cli

Comment utiliser JS pour obtenir le ville et emplacement Situation géographique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!