Category
INDEX
バイナリデータをJavaScriptからサーブレットに送る方法
#Web
投稿日:2025-06-07
更新日:2026-08-17
参考URL
このサイトはJSP/サーブレットで作っていて、管理画面の設計上、画像データをJavaScriptからサーブレットに送りたい状況が発生していました。
この機能の作成に大分苦労していましたが、解決できたのでメモ。
全体の流れとしては、
といったものになっています。下がそのコード全文です。
サーブレットの方は幾分かシンプルで、
という流れです。下がそのコード全文になります。
この機能の作成に大分苦労していましたが、解決できたのでメモ。
JavaScript側の処理
1. ファイルをArrayBufferに変換
2. ArrayBufferをUint8Arrayに変換
3. Uint8Arrayの配列を文字列に変換
4. 文字列をBase64に変換
5. Ajaxでサーブレットに送信
2. ArrayBufferをUint8Arrayに変換
3. Uint8Arrayの配列を文字列に変換
4. 文字列をBase64に変換
5. Ajaxでサーブレットに送信
Copy Code
function sendBinary(file)
{
const reader = new FileReader();
reader.onload = function(e)
{
// ArrayBufferをUint8Arrayに変換
const unit8Array = new Uint8Array(e.target.result);
const decodeBinaryString = uint8Array => uint8Array.reduce(
(binaryString, uint8) => binaryString + String.fromCharCode(uint8),'',);
// Uint8Arrayを文字列に変換
const binaryString = decodeBinaryString(unit8Array);
// Uint8Array文字列データをBase64に変換
const base64 = btoa(binaryString);
// Ajaxでservletにリクエストを送信
var request = {
base64 : base64,
};
$.ajax({
type : "POST",
url : [アクセスしたいサーブレットのURL],
data : request
});
};
// 引数のFileをArrayBufferに変換
reader.readAsArrayBuffer(file);
}
Javaサーブレット側の処理
1. 設定されたBase64のリクエストを取得
2. Base64をByte[]に変換
3. ファイルの書き込み
2. Base64をByte[]に変換
3. ファイルの書き込み
Copy Code
@WebServlet(urlPatterns = {[任意のアノテーション]})
public class TransportImage extends HttpServlet
{
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
//リクエストパラメータを取得
String base64 = request.getParameter("base64");
//元々のByteの配列データへ戻す
Base64.Decoder decoder = Base64.getDecoder();
byte[] decoded = decoder.decode(base64.getBytes(StandardCharsets.UTF_8));
//ファイルの書き込み
FileOutputStream fileOutoutStream = new FileOutputStream([書き込みしたい任意のファイルパス]);
fileOutoutStream.write(decoded);
fileOutoutStream.close();
}
}
