0

Есть клиент, загружающий картинки на сервер. Сервер недоступен для правок/доработок. Можно работать только с клиентом.

Перед отправкой картинки на сервер необходимо ее порезать/ресайзить и тд. На выходе я получу base64 строку с данными файла.

Но со стороны сервера мне говорят, что картинки могут приниматься только в "натуральном" виде и никак иначе.

Пользуюсь jquery ajaxform

Помогите, пожалуйста, разобраться что такое "натуральный" вид?

У ajaxform есть метод beforeSubmit, где можно пробежаться по данным перед отправкой, в объекте с файлом хранятся только метаданные типа size, name, lastModified и тд. Я не понимаю что именно отправляется на сервер.

Нашел статью, где показывается как base64 в blob конвертировать можно, но будет ли это "натуральным" видом?

1 ответ 1

2

Разобрался в итоге.

Первым делом надо 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 скрипт, где можно сравнить приходящие данные и сохранить файлики.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.