Форма с файлом - загрузка в Json - строка в JavaBackend

Question

У меня есть html-форма, которую я анализирую в json и отправляю на мой java-бэкэнд.

        var data = {};
        var formArray = $("#form").serializeArray();
        $.each(formArray, function (i, field) {
            if(field.name !== '') {
                data[field.name] = field.value;
            }
        });

        $.ajax({
            type: "POST",
            url: encodedContextPath + "/form/send",
            data: JSON.stringify(data),
            dataType: "json",
            contentType: 'application/json'
            ........

Теперь мне нужно добавить возможность также загружать PDF-файл, как я могу поместить этофайл в мой JSON, который я отправлю на сервер?Могу ли я как-нибудь сериализовать его или сгенерировать поток данных, который я могу поместить в json?

Answer 1

Вы можете использовать FileReader, чтобы получить данные PDF-файла и отправить его в формате JSON.

let pdfFile;
$('<file-input-id-or-class>').on('change', onPdfUpload);

function onPdfUpload($event) {
    let file = $event.target.files[0];
    if (!file) return;

    let reader = new FileReader();
    reader.onload = function (e) {
        pdfFile = reader.result;
    };
    reader.readAsDataURL(file);
}


var data = {};
    var formArray = $("#form").serializeArray();
    $.each(formArray, function (i, field) {
        if(field.name !== '') {
            data[field.name] = field.value;
        }
    });

   data.pdfFileContent = pdfFile;// you can change field name accordingly

    $.ajax({
        type: "POST",
        url: encodedContextPath + "/form/send",
        data: JSON.stringify(data),
        dataType: "json",
        contentType: 'application/json'