

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

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

[code]

    b'\x89PNG\r\n\x1a\n\x00\x00\x00\....
    
[/code]

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

[code]

    <!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>
[/code]

### 参照

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


CC BY-SA 4.0
2021-02-12T06:17:57.433
73948
2021-02-12T07:49:25.130
2021-02-12T07:49:25.130
3060
22565
question
javascript html html5 画像
JavaScriptでPNG画像などのデータをバイナリ形式で取得したい


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

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

＊ フォームの場合

[code]

    <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>
    
[/code]

＊ XHRの場合

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2021-02-12T06:51:16.017
73949
2021-02-12T07:33:34.250
2021-02-12T07:33:34.250
3475
3475
73948
answer