Gunakan FileReader untuk mengekod fail ke Base64 dan kemudian memuat naiknya melalui kemahiran AJAX

Gunakan FileReader untuk mengekod fail ke Base64 dan kemudian memuat naiknya melalui kemahiran AJAX_javascript

WBOY

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

asal

1505 orang telah melayarinya

Anda tidak boleh memuat naik fail secara langsung menggunakan AJAX Secara amnya, anda membuat iframe baharu dan melengkapkan proses penyerahan borang di dalamnya untuk mencapai kesan memuat naik fail secara tidak segerak.
Ini boleh mencapai keserasian penyemak imbas yang lebih baik, tetapi jumlah kod akan menjadi agak besar, walaupun pemalam muat naik fail digunakan, seperti plupload.

Bagaimanakah kita boleh mencapai tahap fleksibiliti Alangkah baiknya jika kita boleh menganggap fail sebagai parameter bentuk biasa sama seperti data borang penyerahan AJAX biasa.

Saya mempunyai idea, bukankah cukup untuk menggunakan objek FileReader JavaScript untuk mengekod fail ke dalam base64 dan kemudian menghantarnya ke pelayan~

Mula ambil tindakan dan cukupkan makanan dan pakaian.

Base64 bahagian hadapan mengekod fail dan menghantarnya ke pelayan melalui 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>

Salin selepas log masuk

Halaman belakang menyahkod dan menyimpan data fail:

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

Salin selepas log masuk

Objek FileReader dalam JavaScript disokong oleh semua penyemak imbas arus perdana, dan disokong oleh IE10 dan ke atas Saya secara peribadi berpendapat bahawa kaedah muat naik fail tak segerak ini boleh dipertimbangkan apabila menyediakan perkhidmatan untuk julat yang kecil, yang menjimatkan masa dan usaha. Keserasian dengan siri IE adalah perkara lain.