suchen

Heim >Web-Frontend >js-Tutorial >Base64-codierte Datei zum Hochladen über AJAX

Base64-codierte Datei zum Hochladen über AJAX

php中世界最好的语言
php中世界最好的语言Original
2018-06-08 14:05:442635Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für das Hochladen von Dateien mit Base64-Kodierung über AJAX vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

z Es ist nicht möglich, Dateien direkt mit AJAX hochzuladen. Im Allgemeinen wird ein neuer Iframe erstellt, in dem der Formularübermittlungsprozess abgeschlossen wird, um den Effekt des asynchronen Datei-Uploads zu erzielen.

Dadurch kann eine bessere Browserkompatibilität erreicht werden, die Codemenge ist jedoch relativ groß, selbst wenn ein Datei-Upload-Plug-In wie Plupload verwendet wird.

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 Server zu übertragen~

Fangen Sie damit an und sorgen Sie für ausreichend 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>

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

FileReader-Objekt In Javascript-Mainstream-Browsern werden sie alle unterstützt, und ich denke, dass diese asynchrone Datei-Upload-Methode in Betracht gezogen werden kann, wenn Dienste für einen kleinen Bereich bereitgestellt werden, was Zeit und Aufwand spart.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Winkeldruckseitenbezeichnungsfunktion

Verwenden Sie Element-UI Table, um die Drag-and-Drop-Funktion zu implementieren

Das obige ist der detaillierte Inhalt vonBase64-codierte Datei zum Hochladen über AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erklären Sie im Detail, wie Komponenten und ihre Funktionen in Vue.js verwendet werden.Nächster Artikel：Erklären Sie im Detail, wie Komponenten und ihre Funktionen in Vue.js verwendet werden.

In Verbindung stehende Artikel

Mehr sehen