Sending Binary data via Jquery Ajax

Question

I want to send a binary post data with jquery ajax to the server backend but i can not success with it.

The success post data like this

I am using code like this

    var newBoundary = createRandom(16)
var datax  = '------WebKitFormBoundary'+ newBoundary +'\n'
    datax += 'Content-Disposition: form-data; name="queryOptionsDTO"; filename="blob"\n'
    datax += 'Content-Type: application/json\n\n'

    datax += '{"queryPage":{"initialPage":0,"pageSize":15},"sortInfo":{"sortFields":[{"propertyName":"updateDate","ascending":false}]},"queryParameterDTOs":[{"queryParameterType":"SIMILARITY","propertyName":"kurum.gorunenAd","similarityStrategy":"START"},{"queryParameterType":"SIMILARITY","propertyName":"markaAdi","similarityStrategy":"START"},{"queryParameterType":"EQUALITY","propertyName":"barkodNumarasi","value":"'+ barkod +'"},{"queryParameterType":"SIMILARITY","propertyName":"piyasayaArzIsmi","similarityStrategy":"START"},{"queryParameterType":"SIMILARITY","propertyName":"urunCinsi","similarityStrategy":"START"},{"queryParameterType":"CONTEXT","propertyName":"menseiUlkeAdi","similarityStrategy":"START"},{"queryParameterType":"EQUALITY","propertyName":"ucYasAltiCocuklarIcinUretilmis"},{"queryParameterType":"EQUALITY","propertyName":"ithalImalBilgisi"}],"queryTotal":false}\n'

    $.ajax({
     beforeSend: function(xhrObj){
            xhrObj.setRequestHeader("anonymousUtsToken",sessionStorage.getItem("anonymousUtsToken"));
            xhrObj.setRequestHeader("preferredLocale","tr-TR");
            xhrObj.setRequestHeader("Accept","application/json, text/plain, */*");
            xhrObj.setRequestHeader("Content-Type","multipart/form-data; boundary=----WebKitFormBoundary"+ newBoundary);
    },
        url: '/UTS/vat/rest/vatKozmetik/kozmetikUrunSorgula',
        type:"POST",
        dataType:"binary",
        data: datax,
        processData:false,
        contentType:false,
        success:function (data, status, req) {
            console.log( req);
        },
        error:function (req, status, error) {
            console.log(req);
        }
    });

but result like this

How can i send data as; queryOptionsDTO: (binary)

Brian Mains · Accepted Answer · 2019-07-10 12:40:54Z

1

You can use the FileReader object to read a file's contents:

var fileReader = new FileReader();
fileReader.addEventListener('load', function () {
   var result = fileReader.result;
   $hidden.val(result);
});
fileReader.readAsDataURL(file);

The FileReader object reads the file async and triggers a callback on completion. Using, this, you can then take the file's contents and send it to AJAX by posting the results from the file reader (base 64 string).

Adapted from my original blog post.

There are also other plugins like Uploadify that can provide this functionality.

answered Jul 10, 2019 at 12:40

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hakansen Over a year ago

This is not for uploading, This is for sending data in binary format but i did not know how to use.

Brian Mains Over a year ago

I'm saying you can read the file as base 64 string, and send data in string format instead...

Collectives™ on Stack Overflow

Sending Binary data via Jquery Ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related