cari

Rumah  >  Artikel  >  hujung hadapan web  >  Gunakan FileReader untuk mengekod fail ke Base64 dan kemudian memuat naiknya melalui kemahiran AJAX_javascript

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

WBOY
WBOYasal
2016-05-16 15:23:501486semak imbas

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>

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

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Petua untuk mengoptimumkan rentetan JSON dengan petua expressions_javascript biasaArtikel seterusnya：Petua untuk mengoptimumkan rentetan JSON dengan petua expressions_javascript biasa

Artikel berkaitan

Lihat lagi