jquery modifier l'objet de téléchargement

jQuery est une bibliothèque JavaScript largement utilisée dans le développement Web qui fournit une API riche et des méthodes pratiques pour manipuler des éléments HTML, gérer des événements, créer des animations, etc. Parmi eux, le téléchargement de fichiers est une exigence courante, et de nombreux sites Web exigent que les utilisateurs téléchargent des photos, des vidéos et d'autres fichiers. Cependant, en raison des restrictions de sécurité du navigateur, le style et le comportement du formulaire de téléchargement sont ceux par défaut et ne peuvent pas répondre aux exigences du site Web. Cet article expliquera comment utiliser jQuery pour implémenter la fonction de modification des objets téléchargés afin d'obtenir une meilleure expérience utilisateur.

1. Modifier le style du bouton de téléchargement

Avec les sélecteurs jQuery, nous pouvons facilement obtenir les éléments dans le formulaire de téléchargement et modifier leurs styles. Par exemple, nous pouvons masquer le bouton de téléchargement par défaut, puis ajouter un bouton de téléchargement personnalisé à la page. Lorsque l'utilisateur clique sur le bouton personnalisé, l'événement de clic du bouton par défaut est réellement déclenché, faisant ainsi apparaître la boîte de sélection de fichier.

Le code HTML est le suivant :

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" id="fileToUpload">
  <label for="fileToUpload" id="customUpload">选择文件</label>
  <input type="submit" value="上传文件" name="submit">
</form>

Le code CSS est le suivant :

input[type="file"] {
  display: none;
}

#customUpload {
  border: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
}

Dans le code ci-dessus, nous saisirons[type=" file"] élément Définissez l'attribut d'affichage sur none pour masquer le bouton de téléchargement par défaut. Dans le même temps, nous avons créé un élément label et défini son attribut for sur l'identifiant de l'élément input[type="file"] afin que l'événement click de l'élément input soit déclenché lorsque l'on clique sur l'étiquette. De plus, nous avons également conçu le bouton de téléchargement personnalisé pour le rendre plus beau et plus facile à utiliser.

2. Modifier le style de la zone de sélection de fichier

Par défaut, la zone de sélection de fichier est rendue par le navigateur, et le style et le comportement ne peuvent pas être modifié de. Cependant, dans certains navigateurs modernes, nous pouvons modifier le style de la zone de sélection de fichier via des sélecteurs de pseudo-classe CSS. Par exemple, nous pouvons définir le sélecteur de pseudo-classe ::-webkit-file-upload-button de la zone de saisie (input[type="file"]) pour modifier le texte, la couleur, la bordure et d'autres attributs de la sélection de fichier. boîte.

Le code CSS est le suivant :

input[type="file"]::-webkit-file-upload-button {
  background-color: #42a5f5;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Dans le code ci-dessus, nous utilisons le sélecteur de pseudo-classe pour l'élément input[type="file"] ::- webkit-file-upload -Button définit la couleur d'arrière-plan, la couleur du texte, le style de bordure et d'autres attributs pour le rendre plus beau.

3. Modifier la barre de progression et les informations d'invite lors du téléchargement de fichiers

Lors du téléchargement de fichiers, nous devons également afficher la barre de progression du téléchargement et les informations d'invite à l'utilisateur, pour informer les utilisateurs de l'état et de la progression du téléchargement. Dans jQuery, nous pouvons utiliser les objets AJAX et XMLHttpRequest pour télécharger des fichiers et obtenir la progression et les résultats du téléchargement via des fonctions de rappel. Les étapes spécifiques sont les suivantes :

(1) Créez un objet FormData et ajoutez-y des fichiers et d'autres données de formulaire.

(2) Utilisez la fonction $.ajax() pour envoyer une requête AJAX, définissez le type sur POST, l'URL de l'adresse de téléchargement, les données de l'objet FormData et processData et contentType sur false dans l'ordre pour traiter des données binaires.

(3) Définissez la fonction de rappel xhr.upload.onprogress, surveillez la progression du téléchargement et mettez à jour la largeur de la barre de progression dans la fonction de rappel.

(4) Définissez la fonction de rappel xhr.onreadystatechange, surveillez l'état et les résultats du téléchargement, et mettez à jour les informations d'invite et les résultats du traitement dans la fonction de rappel.

Le code JavaScript est le suivant :

$(document).on('change', '#fileToUpload', function() {
  var file = $(this)[0].files[0];
  var formData = new FormData();
  formData.append('file', file);
  $.ajax({
    type: 'POST',
    url: 'upload.php',
    data: formData,
    processData: false,
    contentType: false,
    xhr: function() {
      var xhr = new XMLHttpRequest();
      xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
          var percent = Math.round((e.loaded / e.total) * 100);
          $('#progress').css('width', percent + '%');
          $('#percent').text(percent + '%');
        }
      };
      return xhr;
    },
    success: function(data) {
      $('#result').text('上传成功');
      // 处理上传结果
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      $('#result').text('上传失败');
      // 处理上传错误
    }
  })
});

Dans le code ci-dessus, on écoute l'événement change de l'élément input[type="file"] afin d'obtenir le objet fichier téléchargé et mis Il est ajouté à l'objet FormData. Nous utilisons ensuite la fonction $.ajax() pour envoyer la requête AJAX et définir les fonctions de progression du téléchargement et de rappel d'état pour l'objet xhr. Dans la fonction de rappel de progression du téléchargement, nous calculons et mettons à jour la largeur et les informations d'invite de la barre de progression. Dans la fonction de rappel de réussite ou d'échec, nous mettons à jour les résultats du téléchargement et traitons les résultats du téléchargement.

Résumé

En utilisant jQuery, nous pouvons facilement implémenter la fonction de modification de l'objet téléchargé, améliorant ainsi l'expérience utilisateur et l'interactivité du site Web. Parmi eux, il convient de noter que même si le style et le comportement du formulaire de téléchargement peuvent être modifiés, garantir la sécurité et la stabilité du téléchargement est la considération la plus importante. Par conséquent, lors du processus de modification de l'objet de téléchargement, nous devons suivre les spécifications et les meilleures pratiques pertinentes pour garantir l'exactitude et la stabilité de la fonction de téléchargement.

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!