Question

我正在尝试（到目前为止未成功）将文件（图像）附加到我的JSON数据以调用我的Web服务中的方法。

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

如果我将“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})    		
		  });		
	});

在网络服务方面，我称这种方法为：

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

使用类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;
    }

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

提前谢谢！

Answer 1

利用javascript中提供的FileReader对象 - HTML 5文件Api（browser support）

    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) {}
    });      
  });

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

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

1 个答案: