web-dev-qa-db-ja.com

Ajaxを使用してサーバーに画像とJSONデータを送信するPOST request？

ユーザーが自分のマシンから選択した画像とフォームデータをすべてJSONオブジェクトにラップしてサーバーに送信したい。私はNode for the serverを使用しています。画像を他のフォーム要素と一緒にJSONオブジェクトに配置してNodeで読み取ることはできますか？

javascriptjqueryajaxjsonnode.js
11
Irlanco

私が遭遇した一般的な方法は、Base64文字列アプローチを使用することです。画像をBase64文字列にエンコードし、それをサーバーに送信するJSONオブジェクトの一部として設定します。

別のアプローチでは、JSONのバイナリデータを使用しているようですが、これまでにこれほど試したことはなく、あまり情報がありませんでした。

こちら JavascriptでBase64エンコーディングを行うコードサンプル。具体的には以下の方法を探します

function getBase64Image(imgElem) {
// imgElem must be on the same server otherwise a cross-Origin error will be thrown "SECURITY_ERR: DOM Exception 18"
    var canvas = document.createElement("canvas");
    canvas.width = imgElem.clientWidth;
    canvas.height = imgElem.clientHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
12
ipohfly

これを実現する方法があります。画像データを使用します。

Javascriptでは、クライアント側でFileReaderを使用してバイナリイメージデータを読み取り、それらをbase64エンコードされた文字列に取得できます。

クライアント側：

var file = $('.file-upload > input')[0].files[0];

function upload(file) {
  var reader = new FileReader();

  // when image data was read
  reader.onload = function(event) {
    // I usually remove the prefix to only keep data, but it depends on your server
    var data = event.target.result.replace("data:"+ file.type +";base64,", '');

    // make here your ajax call
    $.ajax({
      url: 'and_so_on',
      json: {
        data: data
      }
    });

  // read data from file
  reader.readAsDataURL(file);

}

サーバー側では、バッファーコンストラクターを使用してバイナリに簡単に変換できるbase64エンコードされた画像を受け取ります

var buffer = new Buffer(data, 'base64');

FileReaderは すべてのブラウザーでサポートされているわけではありません であることに注意してください。

9
Feugy