How to Send image data with other data to java backend with http post in JS

Question

IAM trying to develop a offline PWA app .I have a image blob data which I want to send to java backend.

function callAjax(data){
         $http({
             method: 'POST',
             url: "./WQF00069/update.app",
             cache:false,
             async:false,
             params:data,
             data: {} ,
             contentType: "application/json; charset=utf-8",
             dataType: "json",
            }).success(function(data) {
                Flash.create('info', ' Update Success Fully ', 'large-text');
      }).error(function(response){ 
                 console.dir(response);
                 Flash.create('danger','There is a  Problem.Contact With Administrator', 'large-text');

         });
    }

After send the image data in params no data receive in java backend.Please help

please provide clear information about your problem, some code, logs, etc.. — Tsepo Nkalai, Nov 02 '19 at 17:36
Encode the image binary to base64 and set it as a field in the json. At the back end you can decode the base64 to binary to get the original image. — user12047085, Nov 02 '19 at 17:40

score 0 · Answer 1 · answered Nov 02 '19 at 17:39

0

Convert your image to text-based encodings ( Personally I would use base64) and send it with a POST request to your backend Java API.

answered Nov 02 '19 at 17:39

Ali

468
1
8
19

Thanks Ali sir but still problem . – Tridib Chandra Nov 04 '19 at 07:06
when i encript the image data it comes a large string. Which is not send through ajax – Tridib Chandra Nov 04 '19 at 10:30

score 0 · Answer 2 · answered Nov 04 '19 at 07:05

I am sending this image data through ajax to backend.I also conver it in base 64 encode. But still problem .I think large data can not send through ajax.Here is my full code

//***After click on upload button******************// 
     vm.upload= function(state_cd,dist_cd,blk_cd,pan_cd,src_typ_cd,src_cd,src_nm,m_lat_val_degree,m_long_val_degree,src_img,imageContent){
        var imageall=null;
        var fd=null;
         var blob=null;
         var url=null;
//***************imageContent blob content from indexd db  and transfer in image *******************************************************************//
         getImageUrlFromBlob(imageContent).then(function (result) {
             imageall = result.replace(/data:;base64,/, 'data:image/gif;base64,');
             //var block = imageall.split(";");
            // var realData = block[1].split(",")[1];
            // blob = b64toBlob(realData,"image/gif");
            // var reader = new FileReader();
            // reader.readAsText(blob);
             //var image= reader.result;
            var data={'mst.stateCd':state_cd,'mst.distCd':dist_cd,'mst.blkCd':blk_cd,'mst.panCd':pan_cd,'mst.userId':$rootScope.userId,'mst.srcTypCd':src_typ_cd,'mst.srcCd':src_cd,'mst.srcNm':src_nm,'mst.mLatValDegree':m_lat_val_degree,'mst.mLongValDegree':m_long_val_degree,'mst.srcImg':src_img,'mst.imageContent':imageall};


          callAjax(data);// send image data to backend throgh ajax 
         });
     }
//************************Ajax call*****************************************************//
    function callAjax(data){
         $http({
             method: 'POST',
             url: "./WQF00069/update.app",
             cache:false,
             async:false,
             params:data,
             data: {} ,
             contentType: "application/json; charset=utf-8",
             dataType: "json",
            }).success(function(data) {
                Flash.create('info', ' Update Success Fully ', 'large-text');
      }).error(function(response){ 
                 console.dir(response);
                 Flash.create('danger','There is a  Problem.Contact With Administrator', 'large-text');

         });
    }

score 0 · Answer 3 · answered Nov 04 '19 at 07:09

0

$("form[name='uploader']").submit(function(e) {
  var formData = new FormData($(this)[0]);

  $.ajax({
    url: "page.jsp",
    type: "POST",
    data: formData,
    success: function (msg) {
      alert(msg)
    },
    cache: false,
    contentType: false,
    processData: false
  });

  e.preventDefault();
});

follow this How to send image to PHP file using Ajax?

answered Nov 04 '19 at 07:09

Durgesh Kumar

935
10
17

Durgesh Kumar sir thanks. But Except of form data can i send image from font end to back end ?? – Tridib Chandra Nov 04 '19 at 07:51
have a try, i have not actually used this way, – Durgesh Kumar Nov 04 '19 at 12:25

How to Send image data with other data to java backend with http post in JS

3 Answers3