ホームページ > 記事 > ウェブフロントエンド > FileReader を使用してファイルを Base64 にエンコードし、AJAX_javascript スキルを通じてアップロードします。

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

WBOYオリジナル: 2016-05-16 15:23:501405ブラウズ

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シリーズとの互換性は別問題です。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：正規表現を使用して JSON 文字列を最適化するためのヒント_JavaScript のヒント次の記事：正規表現を使用して JSON 文字列を最適化するためのヒント_JavaScript のヒント

続きを見る

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

関連記事