There is a client that uploads pictures to the server. The server is unavailable for revisions. You can only work with the client.

Before sending a picture to the server, you need to cut / resize it and so on. At the output, I get a base64 line with the file data.

But from the server’s side, they tell me that pictures can only be taken in a “natural” form and nothing else.

I use jquery ajaxform

Help, please, to understand what is the "natural" view?

ajaxform has a beforeSubmit method, where you can go over the data before sending, in an object with a file only metadata of the type size , name , lastModified , etc. are stored. I do not understand what is sent to the server.

I found an article where it shows how base64 to blob can be converted, but will it be a “natural” look?

    1 answer 1

    Understood in the end.

    The first step is to convert base64 to blob , as described in the article.

    Then create a FormData object and send it via XMLHttpRequest

    Example:

     $(document).ready(function(){ $(document).on('change', 'form input[type=file]', function(){ var form = $('form').has($(this)); // обычная отправка формы с файлами form.ajaxSubmit({ complete: function(xhr){ console.log(xhr); form.after(xhr.responseText); } }); // извлечение файла в base64, преобразование в blob и отправка var input = this; if (input.files && input.files[0]) { var file = input.files[0], reader = new FileReader(); reader.onload = function(e){ var fileData = e.target.result, parts, type, base64Data; parts = fileData.split(','); type = parts[0]; base64Data = parts[1]; type = type.split(';')[0].split(':')[1]; var formData = new FormData(), blobImage = b64toBlob(base64Data, type); formData.append('xhr', 'works!'); formData.append('image', blobImage, '123.jpg'); var xhr = new XMLHttpRequest(); xhr.open('POST', form.attr('action'), true); xhr.onload = function(e){ console.log('selfreaded ', xhr); form.append(xhr.responseText); }; xhr.send(formData); } reader.readAsDataURL(file); } }); }); // https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript function b64toBlob(b64Data, contentType, sliceSize) { contentType = contentType || ''; sliceSize = sliceSize || 512; var byteCharacters = atob(b64Data); var byteArrays = []; for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { var slice = byteCharacters.slice(offset, offset + sliceSize); var byteNumbers = new Array(slice.length); for (var i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } var blob = new Blob(byteArrays, {type: contentType}); return blob; }

    2 requests sent. 1st using ajaxSubmit, second via XHR / FormData. My requests were sent to a php script, where you can compare the incoming data and save the files.