Verwenden Sie FileReader, um Dateien in Base64 zu kodieren und laden Sie sie dann mithilfe von AJAX_Javascript-Kenntnissen hoch-js-Tutorial-php.cn

Verwenden Sie FileReader, um Dateien in Base64 zu kodieren und laden Sie sie dann mithilfe von AJAX_Javascript-Kenntnissen hoch

WBOY

Freigeben： 2016-05-16 15:23:50

Original

1488 Leute haben es durchsucht

Sie können Dateien nicht direkt mit AJAX hochladen. Im Allgemeinen erstellen Sie einen neuen Iframe und schließen den Formularübermittlungsprozess darin ab, um den Effekt des asynchronen Hochladens von Dateien zu erzielen.
Dadurch kann eine bessere Browserkompatibilität erreicht werden, die Codemenge ist jedoch relativ groß, selbst wenn ein Datei-Upload-Plugin wie plupload verwendet wird.

Wie können wir ein gewisses Maß an Flexibilität erreichen? Es wäre großartig, wenn wir Dateien wie gewöhnliche AJAX-Übermittlungsformulardaten als gewöhnliche Formularparameter behandeln könnten.

Ich hatte eine Idee, ob es nicht ausreichen würde, das FileReader-Objekt von JavaScript zu verwenden, um die Datei in base64 zu kodieren und sie dann an den Server zu übertragen~

Ergreifen Sie Maßnahmen und sorgen Sie für ausreichend Nahrung und Kleidung.

Das Front-End Base64 kodiert die Datei und überträgt sie per Ajax an den Server:

<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>

Nach dem Login kopieren

Das Backend dekodiert und speichert die Dateidaten:

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

Nach dem Login kopieren

Das FileReader-Objekt in JavaScript wird von allen gängigen Browsern unterstützt und wird von IE10 und höher unterstützt. Ich persönlich denke, dass diese Methode des asynchronen Datei-Uploads bei der Bereitstellung von Diensten für einen kleinen Bereich in Betracht gezogen werden kann, was Zeit und Aufwand spart. Eine andere Sache ist die Kompatibilität mit der IE-Serie.