1

フロントエンドがhtml、backbone.jsに、バックエンドがjerseyに書き込まれるWebアプリケーションを作成しています。私のhtmlフォームには多くの画像アップロード（input type = "file"）とテキストデータ（input type = "text"）があります。それらすべて（画像とプレーン/テキスト）を1回のリクエストでJerseyサーバーにアップロードする必要があります。

画像をBase64形式に変換した場合にのみ、1回のリクエストでテキストデータを含む画像をサーバーに送信できることを読みました。

htmlフォームを介してアップロードされている画像をbase64形式に変換してから、すべてのデータをジャージに送信することはできますか？

少し早いですがお礼を ：）

4

2 に答える 2

2

ジャージーの経験はありませんが、これは他のバックエンドでも機能することはわかっています。この例では、モデルはサーバーの画像データにfile_nameととして投稿しますfile_data。バックエンドで画像をデコードする必要があります。以下のフロントエンドコードは、FileReaderAPIを利用しています。IE<10では機能しません。

var model = Backbone.Model.extend({
  readFile : function (file, callback) {
    var reader = new FileReader();
    reader.onload = (function (theFile, self) {
      return function (e) {
        self.set({file_name: theFile.name, file_data : e.target.result});
        _.isUndefined(callback) ? null : callback();
      };
    })(file, this);

    reader.readAsDataURL(file);
  }
});

var view = Backbone.View({
  //...
  onRender : function () {
    var self = this,
      fileChangeHandler = function (e) {
      var callback = function () {
        self.model.save({}, {});
      };
      var file = e.originalEvent.target.files[0];
      self.model.readFile(file, callback);
    };
    self.$("input[type='file']").change(fileChangeHandler);
  }
});
于 2012-12-03T18:48:16.120 に答える
1

複数のテキストと画像を1つのフォームにジャージに投稿しますか？

htmlコード：

<form action="rest/test" method="post" enctype="multipart/form-data">
    <input type="text" name="text1" /> <br />
    <input type="file" name="file1" /> <br />
    <input type="text" name="text2" /> <br />
    <input type="file" name="file2" /> <br />
    <input type="submit" value="Submit" />
</form>

ジャージコード：

@Path("/test")
public class TestResource {

    public TestResource() {
    }

    @POST
    @Consumes("multipart/form-data")
    public Response create(
            @FormDataParam("text1") String text1,
            @FormDataParam("file1") InputStream file1,
            @FormDataParam("text2") String text2,
            @FormDataParam("file2") InputStream file2) {

        //get your data

        return Response.ok().build();
    }
}
于 2012-12-04T07:37:23.240 に答える