通过jQuery在一个Ajax调用中将ArrayBuffer与其他字符串一起发送 [英] Send ArrayBuffer with other string in one Ajax call through jQuery

问题描述

我正在做一个项目，需要将大文件上传到服务器端.我决定使用HTML5 FileReader和jQuery以大块(ArrayBuffer)的形式上传文件.

I'm working on a project need to upload large file to server side. I decided to use HTML5 FileReader and jQuery to upload the file in chunks (ArrayBuffer).

我通过将块转换为base64字符串成功完成了此任务，并使用JSON格式的data参数通过jQuery.post发送到后端服务器.

I successfully finished this task by converting the chunks into base64 string, send to backend server through jQuery.post with the data parameter in JSON format.

例如

$.ajax({
    url: "/Home/Upload",
    type: "POST",
    data: {
        name: block.name,
        index: block.index,
        base64: base64
    },
    processData: true
});

但是我想优化这段代码，因为base64太大而无法转换.我想知道是否可以直接通过$.ajax发送ArrayBuffer.

But I'd like to optimize this code since base64 is too large to transform. I'd like to know if I could send ArrayBuffer directly through $.ajax.

我知道，如果我设置了processData: false并将ArrayBuffer放入data参数中，它可以作为Request.InputStream发送到我的服务器端.但是以这种方式，我无法附加其他数据，例如name和index.

I know that if I set the processData: false and just put ArrayBuffer into data parameter it could be sent to my server side as Request.InputStream. But in this way I cannot attach other data such as name and index.

我想知道是否可以在一个ajax调用中将原始的ArrayBuffer(或blob，二进制)与其他数据(名称，索引)一起发送.

I'd like to know may I send the raw ArrayBuffer (or blob, binary) alone with my other data (name, index) in one ajax call.

推荐答案

我认为我已经解决了此问题.我可以使用FormData用一种形式的文件二进制文件单独转换我的结构化数据.像这样的代码

I think I had got this issue resolved. I can use FormData to transform my structured data alone with file binary in one form. Code like this

var blob = file.slice(block.start, block.end);
// use formdata to send block content in arraybuffer
var fd = new FormData();
fd.append("name", block.name);
fd.append("index", block.index);
fd.append("file", blob);
$.ajax({
    url: "/Home/UploadInFormData",
    data: fd,
    processData: false,
    contentType: "multipart/form-data",
    type: "POST",
    success: function (result) {
        if (!result.success) {
            alert(result.error);
        }
        callback(null, block.index);
    }
});

然后从服务器端，我可以从Request.Form中检索结构化数据，而从Request.Files[0]

Then from server side I can retrieve my structured data from Request.Form while the binary content from Request.Files[0]

这篇关于通过jQuery在一个Ajax调用中将ArrayBuffer与其他字符串一起发送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！