Encodage jQuery pour convertir le téléchargement base64 via AJAX-js tutoriel-php.cn

Encodage jQuery pour convertir le téléchargement base64 via AJAX

php中世界最好的语言

Libérer： 2018-04-28 13:55:01

original

2204 Les gens l'ont consulté

Cette fois, je vais vous expliquer quelles sont les précautions pour convertir l'encodage jQuery en base64 pour le téléchargement via AJAX, et pour convertir l'encodage jQuery en base64 pour le téléchargement via AJAX. Ce qui suit est un cas pratique, prenons. un regard.

L'exemple de cet article décrit comment jQuery encode les fichiers en base64 et les télécharge via AJAX. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Il n'est pas possible de télécharger des fichiers directement en utilisant AJAX. Généralement, une nouvelle iframe est créée pour terminer le processus de soumission du formulaire afin d'obtenir l'effet. de téléchargement de fichiers asynchrone.

Cela permet d'obtenir une meilleure compatibilité avec les navigateurs, mais la quantité de code sera plus importante, même si le plug-in Téléchargement de fichiers est utilisé, comme plupload.

Comment pouvons-nous atteindre un niveau de flexibilité ? Ce serait formidable si nous pouvions traiter les fichiers comme des paramètres de formulaire ordinaires, tout comme les données d'un formulaire de soumission AJAX ordinaire.

J'ai eu un éclair d'inspiration, ne suffirait-il pas d'utiliser l'objet FileReader de javascript pour encoder le fichier en base64 puis le transmettre au serveur~

Démarrez-le et ayez suffisamment de nourriture et de vêtements.

Le front-end en base64 encode le fichier et le transmet au serveur via ajax :

<head>
  <meta charset="UTF-8">
</head>
<form onsubmit="return false;">
  <input type="hidden" name="file_base64" id="file_base64">
  <input type="file" id="fileup">
  <input type="submit" value="submit" onclick="$.post(&#39;./uploader.php&#39;, $(this).parent().serialize());">
</form>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#fileup").change(function(){
    var v = $(this).val();
    var reader = new FileReader();
    reader.readAsDataURL(this.files[0]);
    reader.onload = function(e){
      console.log(e.target.result);
      $('#file_base64').val(e.target.result);
    };
  });
});
</script>

Copier après la connexion

Le back-end décode et enregistre les données du fichier :

<?php
if (isset($_POST['file_base64'])){
  $file_base64 = $_POST['file_base64'];
  $file_base64 = preg_replace('/data:.*;base64,/i', '', $file_base64);
  $file_base64 = base64_decode($file_base64);
  file_put_contents('./file.save', $file_base64);
}

Copier après la connexion

Je crois que vous avez lu cet article. Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de mapState et mapGetters dans vuex

Explication détaillée des étapes à suivre implémenter l'impression partielle de la page en angulaire

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!