Разобрался в итоге.
Первым делом надо base64
преобразовать в blob
, как описано в статье
Затем создать объект FormData
и отправить его через XMLHttpRequest
Пример:
$(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 запроса. 1-й с помощью ajaxSubmit, второй через XHR/FormData.
У меня запросы отправлялись на php скрипт, где можно сравнить приходящие данные и сохранить файлики.