Как добавить содержимое PDF в свойство объекта, размещенного с использованием AJAX и WebAPI

Question

В настоящее время кнопка отправки запускает функцию javascript, которая отправляет данные в действие контроллера с использованием AJAX.Форма размещения не используется.Например:

$.ajax({
                type: 'POST',
                dataType: "json",
                url: "@Url.Action("SubmitRequest")",
                data: {
                    sendDate: sendDate,
                    dueDate: dueDate,
                    startDate: startDate,
                    endDate: endDate, 
                    ...

                },
                success: function (data) {

                },
                error: function (request, status, error) {
                    popError(request.responseText);
                }
            });

Я хотел бы добавить к этому объекту дополнительный параметр, который содержит двоичный файл документа PDF.Например:

   $.ajax({
                    type: 'POST',
                    dataType: "json",
                    url: "@Url.Action("SubmitRequest")",
                    data: {
                        sendDate: sendDate,
                        dueDate: dueDate,
                        startDate: startDate,
                        endDate: endDate, 
                        ...
                        pdf: pdfData                    
                    },
                    success: function (data) {

                    },
                    error: function (request, status, error) {
                        popError(request.responseText);
                    }
                });

Все примеры, которые я видел, показали размещение pdf в качестве единственного значения для «данных».Есть ли способ включить его как часть объекта данных?

Пользователь будет выбирать PDF, используя элемент ввода файла, такой как:

    <div class="dcell">
        <input type="file" id="btnUploadStaticPdf" name="btnUploadStaticPdf" value="Attach Pdf" class="btn btn-default" style="display:none" />
    </div>

Answer 1

Вы можете попробовать преобразовать PDF в закодированную строку Base64.Затем можно установить строку в качестве значения одного из атрибутов в объекте JSON.

 var selectedFile = $("#btnUploadStaticPdf").files;
 var fileToLoad = selectedFile[0];

 var fileReader = new FileReader();
 var base64 = fileReader.readAsDataURL(fileToLoad);
 ...

 data: {
    sendDate: sendDate,
    dueDate: dueDate,
    startDate: startDate,
    endDate: endDate, 
    ...
    pdf: base64 
 }

Кодировать файл в Base64

Answer 2

Если вы хотите добавить файл в запрос ajax, вы можете использовать объект FormData

var data = new FormData();
data.append('sendDate', sendDate);
data.append('dueDate', dueDate);
data.append('startDate', startDate);
data.append('endDate', endDate);
data.append('pdf', $('#btnUploadStaticPdf')[0].files[0]);
$.ajax({
    type: 'POST',
    dataType: "json",
    url: "@Url.Action("SubmitRequest")",
    data: data,
    processData: false,  / So jQuery Doesn't mess with your formdata object
    contentType: false, // So jQuery doesn't set the wrong content type
    success: function (data) {

    },
    error: function (request, status, error) {
        popError(request.responseText);
    }

});

На вашем сервере pdf будет доступен через любой поддерживаемый механизм загрузки файлов (возможно, Request.Files)