jQuery-Codierung zum Konvertieren des Base64-Uploads über AJAX-js-Tutorial-php.cn

jQuery-Codierung zum Konvertieren des Base64-Uploads über AJAX

php中世界最好的语言

Freigeben： 2018-04-28 13:55:01

Original

2107 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Konvertierung der jQuery-Codierung in Base64 zum Hochladen über AJAX und die Konvertierung der jQuery-Codierung in Base64 für das Hochladen über AJAX vorstellen. Nehmen wir das Folgende als einen praktischen Fall ein Blick.

Das Beispiel in diesem Artikel beschreibt, wie jQuery Dateien in Base64 kodiert und sie über AJAX hochlädt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Es ist nicht möglich, Dateien direkt mit AJAX hochzuladen. Im Allgemeinen wird ein neuer Iframe erstellt, um den Formularübermittlungsprozess darin abzuschließen und den Effekt zu erzielen des asynchronen Datei-Uploads.

Dadurch kann eine bessere Browserkompatibilität erreicht werden, aber die Codemenge wird größer, selbst wenn das Plug-in Datei-Upload verwendet wird, z. B. plupload.

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

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

Fangen Sie an und haben Sie genug Essen und Kleidung.

Das Front-End-Base64 kodiert die Datei und überträgt sie über 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(&#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>

Nach dem Login kopieren

Das Back-End dekodiert und speichert die Dateidaten:

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

Ich glaube Sie haben es gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von mapState und mapGetters in vuex

Detaillierte Erläuterung der Schritte dazu Implementieren Sie einen teilweisen Druck der Seite im Winkel

Das obige ist der detaillierte Inhalt vonjQuery-Codierung zum Konvertieren des Base64-Uploads über AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!