将图像附加到ajax用于Web服务调用的POST请求数据

I am trying (unsuccessfully so far) to attach a file (an image) to my JSON data to call a method in my webservice.

我正在尝试(到目前为止未成功)将文件(图像)附加到我的JSON数据以调用我的webservice中的方法。

I found some posts regarding the sending of just an image but not an image as part of a json data object.

我发现了一些关于仅发送图像而不是图像作为json数据对象的一部分的帖子。

The call works if i leave "imageFile" as null.

如果我将“imageFile”保留为null,则调用有效。

$("#butSubmit").click(function(){	
		
		var files = document.getElementById('files').files;
		var file = files[0];
	
        $.ajax({
		type: "POST",
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		url:"http://localhost:8080/SampleApp/api/users/add",
		data: JSON.stringify({"description":"test2","title":"testest2","uploaderName":"seren","imageFile":file})    		
		  });		
	});

On the web service side i am calling this method:

在Web服务端我调用这个方法:

 @Path("/add")
    @POST
    @Produces(MediaType.APPLICATION_JSON)
    @Consumes(MediaType.APPLICATION_JSON)
    public void addUser(Picture picture){

        userService.persistPicture(picture);

    }

with this constructor for the class Picture:

使用此类构造函数图片:

 @JsonCreator
   public Picture(
            @JsonProperty("description") String description,
            @JsonProperty("title") String title,
            @JsonProperty("uploaderName") String uploaderName,
            @JsonProperty("imageFile") byte[] imageFile) {
        this.uploaderName = uploaderName;
        this.title = title;
        this.description = description;
        this.imageFile = (byte[]) imageFile;
    }

I hope you can point me in the right direction!

我希望你能指出我正确的方向!

Thx in advance!

Thx提前!

1 个解决方案

#1

Make use of FileReader object available in javascript - HTML 5 File Api (browser support)

利用javascript中提供的FileReader对象 - HTML 5文件Api(浏览器支持)

    var files = [];

    $("input[type=file]").change(function(event) {
      $.each(event.target.files, function(index, file) {
        var reader = new FileReader();
        reader.onload = function(event) {  
          object = {};
          object.filename = file.name;
          object.data = event.target.result;
          files.push(object);
        };  
        reader.readAsDataURL(file);
      });
    });

//post file using ajax call
$.each(files, function(index, file) {
    $.ajax({url: "/ajax-upload",
          type: 'POST',
          data: {filename: file.filename, data: file.data},
          success: function(data, status, xhr) {}
    });      
  });

on serverside you receive base64 encoded value which you can convert to binary easily.

在服务器端,您会收到base64编码的值,您可以轻松地将其转换为二进制。

#1