Получить файл base64 динамического входного файла в формате JSON - PullRequest
Новая
       21

Получить файл base64 динамического входного файла в формате JSON

0 голосов
/ 05 октября 2018

Привет всем У меня есть небольшая проблема с генерацией JSON входных файлов.Прежде всего, у меня есть n входных файлов, которые генерируются динамически.

Я надеюсь сгенерировать JSON, который содержит массив файлов (base64), подобный этому [{"id":"1","archivo":base64file1},{"id":"2","archivo":base64file2},{"id":"3","archivo":base64file3},...,{"id":"n","archivo":base64fileN}]

Iнужно это JSON, потому что тогда я собираюсь отправить его в функции ajax и сохранить его в базе данных.

Но когда я нажимаю кнопку отправки, генерируется JSON это [{"id":"1","archivo":null},{"id":"2","archivo":null},{"id":"3","archivo":null}]

function getJSONFilesArray() {
    var files = $(".archivo"); //All input files .archivo
    var JSONFiles = [];
    $.each(files, function () { 
        var file = $(this).prop('files')[0];
        if (typeof file !== 'undefined') {
            var JSONFile = {};
            var id = $(this).attr('id');
            JSONFile.id = id;
            JSONFile.archivo = fileToBase64(id);

            JSONFiles.push(JSONFile);
        }
    });

    alert(JSON.stringify(JSONFiles));
    return false;
}

function fileToBase64(id) {
    var file = $('#' + id).prop('files')[0]; //File
    var base64file = null;
    if (typeof file !== 'undefined') {
        var reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = function () {
            $("#divEspera").html("");
            base64file = reader.result;
            alert(base64file); //Just for check that file is converted
        };

    }

    return(base64file);
}
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <form onsubmit="return getJSONFilesArray();" id="formularioArchivos">
            <div class="form-group">
                <input class="archivo" type="file" class="form-control-file" id="1">
            </div>
            <div class="form-group">
                <input class="archivo" type="file" class="form-control-file" id="2">
            </div>
            <div class="form-group">
                <input class="archivo" type="file" class="form-control-file" id="3">
            </div>
        </form>

        <br><br><button type="submit" form="formularioArchivos">Generar base 64</button>
        <div id="divEspera"></div>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        
    </body>
</html>

Я знаю, что reader.onload - это асинхронная функция, и это проблема, но я не знаю, как я мог решить эту проблему.

...