How to send binary data via JQuery Ajax PUT method

Question

I am new to JQuery and I want to use JQuery Ajax to upload some files to server, Only in PUT method. when I send some binary file(such as gif or jpeg) to my server, upload succeed, but the content of binary data was changed(it's always bigger than original file size). I try to change the content-type or the type of file result, but still not work. Anyone knows how to fix this?

PS: I cannot encode the binary file's content into other form, because I cannot touch the code of server.

var reader = new FileReader();

reader.onloadend = (function(Thefile) {

    $.ajax({
        url: url,
        processData:false,
        //contentType:"application/octet-stream; charset=UTF-8",
        data: file.result,
        type: 'PUT',
        success : function(){console.log("OK!");},
        error : function(){console.log("Not OK!");}
    }); 
})(file);

reader.readAsBinaryString(file);

I've encountered a similar issue. My first guess is that this has to do with the way the ajax function processes data before sending the request. — Brendan Berg
– Brendan Berg, Commented Oct 24, 2012 at 19:25
Regardless of the jQuery AJAX machinery, notice you should assign a function to reader.onloadend - not invoke that function yourself! — Tom
– Tom, Commented Apr 17, 2014 at 12:06

Brendan Berg · Accepted Answer · 2012-10-25 16:59:58Z

Most (all?) browsers will automatically convert string datatypes to UTF-8 when sending them via an XMLHttpRequest. When you read the file as a binary string, you're given exactly that: a JavaScript string object where each character is a value between 0 and 255.

To force the AJAX request to send binary encoded data, the data parameter must be an ArrayBuffer, File, or Blob object.

If you need access to the contents of the file before sending, you can convert the binary string to an ArrayBuffer with the following code:

var arrBuff = new ArrayBuffer(file.result.length);
var writer = new Uint8Array(arrBuff);
for (var i = 0, len = file.result.length; i < len; i++) {
    writer[i] = file.result.charCodeAt(i);
}

And you'd pass the arrBuff instance to the AJAX function. Otherwise, you should be able to pass the File object itself into the AJAX function without all of your FileReader code.

Collectives™ on Stack Overflow

How to send binary data via JQuery Ajax PUT method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related