代码之家 › 专栏 › 技术社区 › Vlad

如何将pdf内容添加到使用ajax和webapi发布的对象的属性中

asp.net-mvc ajax jquery

Vlad · 技术社区 · 8 年前

目前,submit按钮触发一个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是“data”的唯一值。是否有方法将其包含为数据对象的一部分?

用户将使用文件输入元素选择pdf,如:

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

2 回复 | 直到 8 年前

Musa 8 年前

如果要向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 也许)

-1

Preston 8 年前

您可以尝试将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 
 }

Encode file to Base64