recherche

Maison >interface Web >js tutoriel >Utilisez FileReader pour encoder des fichiers en Base64, puis téléchargez-les via les compétences AJAX_javascript

Utilisez FileReader pour encoder des fichiers en Base64, puis téléchargez-les via les compétences AJAX_javascript

WBOY
WBOYoriginal
2016-05-16 15:23:501512parcourir

Vous ne pouvez pas télécharger directement des fichiers à l'aide d'AJAX. Généralement, vous créez une nouvelle iframe et y terminez le processus de soumission du formulaire pour obtenir l'effet de téléchargement de fichiers de manière 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.

J'ai eu une idée, ne suffirait-il pas d'utiliser l'objet FileReader de JavaScript pour encoder le fichier en base64 puis le transmettre au serveur~

Commencez à agir et ayez suffisamment de nourriture et de vêtements.

Le front-end 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('./uploader.php', $(this).parent().serialize());">
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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 backend décode et enregistre les données du fichier : 

<&#63;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);
}

L'objet FileReader en JavaScript 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 pour une petite gamme, ce qui permet d'économiser du temps et des efforts. La compatibilité avec la série IE est une autre affaire.

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：Conseils pour optimiser les chaînes JSON avec des astuces d'expressions régulières_javascriptArticle suivant：Conseils pour optimiser les chaînes JSON avec des astuces d'expressions régulières_javascript

Articles Liés

Voir plus