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

WBOY
Lepaskan: 2016-05-16 15:23:50
asal
1465 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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!