suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie FileReader, um Dateien in Base64 zu kodieren und laden Sie sie dann mithilfe von AJAX_Javascript-Kenntnissen hoch

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

WBOY
WBOYOriginal
2016-05-16 15:23:501513Durchsuche

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>

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

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.

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：Tipps zum Optimieren von JSON-Strings mit regulären Ausdrücken_Javascript-TippsNächster Artikel：Tipps zum Optimieren von JSON-Strings mit regulären Ausdrücken_Javascript-Tipps

In Verbindung stehende Artikel

Mehr sehen