ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript でファイルを Base64 に変換するにはどうすればよいですか?

JavaScript でファイルを Base64 に変換するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-12-03 04:53:08737ブラウズ

How to Convert Files to Base64 in JavaScript?

JavaScript でのファイルの Base64 への変換: 包括的なガイド

Web アプリケーションを操作する場合、多くの場合、ファイルの一部としてファイルを送信する必要があります。データ交換。これをシームレスに実現するには、ファイルを Base64 形式に変換する必要があります。この謎めいたエンコード技術は、印刷可能な ASCII 文字のサブセットを使用してバイナリ データを表現し、HTTP またはその他のテキストベースのプロトコルを介してファイルを送信するのに適しています。

問題:

document.querySelector メソッドを通じて取得した File オブジェクトがあるとします。

file = document.querySelector('#files > input[type="file"]').files[0];

目標効率的なデータ転送のために、この File オブジェクトを Base64 文字列に変換することです。

解決策:

ファイルを Base64 に変換するには、によって提供される FileReader クラスを利用できます。 JavaScript。このクラスを使用すると、ファイルの内容を読み取り、Base64 形式にエンコードできます。実装方法は次のとおりです。

function getBase64(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        console.log(reader.result);
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };
}

var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the Base64 string

このコードは、FileReader インスタンスを初期化し、データ URL (DataURL) としてのファイルの読み取りを開始します。読み取り操作が正常に完了すると、onload イベントがトリガーされ、変換された Base64 文字列が Reader.result から取得されます。これで、この Base64 文字列をデータ交換またはその他の目的に使用できるようになります。

以上がJavaScript でファイルを Base64 に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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