FileReader を使用してファイルを Base64 にエンコードし、AJAX_javascript スキルを通じてアップロードします。-jsチュートリアル-php.cn

FileReader を使用してファイルを Base64 にエンコードし、AJAX_javascript スキルを通じてアップロードします。

WBOY

リリース： 2016-05-16 15:23:50

オリジナル

1465 人が閲覧しました

AJAX を使用してファイルを直接アップロードすることはできません。通常、ファイルを非同期にアップロードする効果を得るには、新しい iframe を作成し、その中でフォーム送信プロセスを完了する必要があります。
これにより、ブラウザーの互換性が向上しますが、plupload などのファイルアップロードプラグインが使用される場合でも、コードの量は比較的多くなります。

あるレベルの柔軟性を実現するにはどうすればよいでしょうか? ファイルを通常の AJAX 送信フォームデータと同様に通常のフォームパラメーターとして扱うことができれば素晴らしいと思います。

アイデアがあったのですが、JavaScript の FileReader オブジェクトを使用してファイルを Base64 にエンコードしてからサーバーに送信すれば十分ではないでしょうか~

行動を開始し、十分な食料と衣服を用意してください。

フロントエンドの Base64 はファイルをエンコードし、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>

ログイン後にコピー

バックエンドはファイルデータをデコードして保存します:

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

ログイン後にコピー

JavaScript の FileReader オブジェクトは、すべての主流ブラウザでサポートされており、IE10 以降でサポートされており、小規模な範囲にサービスを提供する場合は、時間と労力を節約できるこの非同期ファイルアップロードの方法を検討できると個人的には思います。 IEシリーズとの互換性は別問題です。