recherche

Maison >interface Web >js tutoriel >Fichier encodé en base64 pour téléchargement via AJAX

Fichier encodé en base64 pour téléchargement via AJAX

php中世界最好的语言
php中世界最好的语言original
2018-06-08 14:05:442638parcourir

Cette fois, je vais vous présenter les précautions à prendre pour télécharger un fichier encodé en base64 via AJAX. Ce qui suit est un cas pratique, jetons-y un œil.

z Il est impossible de télécharger des fichiers directement à l'aide d'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 relativement importante, même si un plug-in de téléchargement de fichiers est utilisé, tel que 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.

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~

Commencer et avoir 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>

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);
}

FileReader en javascript Il est pris en charge par tous les navigateurs grand public et est pris en charge par IE10 et supérieur. Je pense personnellement que cette méthode de téléchargement de fichiers asynchrone peut être envisagée lors de la fourniture de services à une petite gamme, ce qui permet d'économiser du temps et des efforts. la série IE est une autre affaire.

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 :

Fonction de spécification de la page d'impression angulaire

Utilisez Element-UI Table pour implémenter la fonction glisser-déposer

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!

Déclaration：
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
Article précédent：Expliquer en détail comment utiliser les composants et leurs fonctions dans Vue.js ?Article suivant：Expliquer en détail comment utiliser les composants et leurs fonctions dans Vue.js ?

Articles Liés

Voir plus