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

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

WBOY

Libérer： 2016-05-16 15:23:50

original

1482 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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.