0

FileReader.readAsText()のサンプルを試して動作させているのですが、PNG画像を選択すると文字化けしてしまいます。
文字化けしないようにするにはどうしたら良いでしょうか?

やりたいことは、PNG画像のデータを以下のようなバイナリ形式で受け取り、これをそのままデータベースに保存したいです。データはサーバ側でPythonを動作させているのでそちらで受け取りたいです。

b'\x89PNG\r\n\x1a\n\x00\x00\x00\....

使用するOS MacOS High Sierra
ブラウザはchromeバージョン 88.0.4324.150です。
よろしくお願いします。

<!DOCTYPE html>
<html>
<head>
<style>
    div#result { white-space: pre-wrap ; }
    input { width: 95% ; font-size: 16px ; }
</style>
</head>
<body>
    <input type="file" multiple id="hoge">
<hr>
    <div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
var resultElement = document.getElementById( "result" ) ;

element.onchange = function () {
    var fileReader = new FileReader() ;

    fileReader.onload = function () {
        console.log( this.result ) ;
        resultElement.appendChild( new Text( this.result ) ) ;
    }

    var file = element.files[0] ;
    fileReader.readAsText( file ) ;
//  fileReader.readAsBinaryString( file ) ; // 試してみよう!
}
</script>
</body>
</html>

参照

https://lab.syncer.jp/Web/API_Interface/Reference/IDL/FileReader/readAsText/

0

1 件の回答 1

1

readAsText() はテキストを読み込むためのものなので、テキストではないPNG画像に使っても意味がありません。

画像ファイルのバイナリをサーバに送るには、一般的にはフォームに含めて multipart/form-data タイプで送信します。

* フォームの場合

<body>
  <form action="...." enctype="multipart/form-data">
    <input type="file" multiple id="hoge" name="files">
  </form>
<hr>
<script>
var element = document.getElementById("hoge");
element.onchange = function() {
    element.form.submit();
};
</script>
</body>

* XHRの場合

<body>
  <input type="file" multiple id="hoge"
<hr>
<script>
var element = document.getElementById("hoge");
element.onchange = function() {
    let fd = new FormData();
    fd.append('files', element.files[0]);
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '....');
    xhr.send(fd);
};
</script>
</body>
17
  • ありがとうございます。PNGファイルを受け取りたい場合はどうしたら良いのでしょうか?
    – wataru
    2021年2月12日 7:06
  • PNGファイルを読み込んだ結果をどうしたいのでしょうか?
    – int32_t
    2021年2月12日 7:08
  • こういったバイナリ形式で受け取りたいです。b'\x89PNG\r\n\x1a\n\x00\x00\x00\....これをそのままデータベースに保存したいんです。
    – wataru
    2021年2月12日 7:10
  • どこで受け取るという話でしょうか? ウェブサーバ?
    – int32_t
    2021年2月12日 7:11
  • はいサーバ側でPythonを動作させているのでそちらで受け取りたいです。
    – wataru
    2021年2月12日 7:13

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。