jquery - 使用 Blueimp jQuery File Upload 插件将文件添加到 JSON

Question

我正在前端开发一种新型调查问题，允许用户上传图像文件。鉴于 jQuery 本身不支持文件上传，我正在尝试使用jQuery File Upload plugin。

我无法编写自定义方法来通过插件获取文件并将其插入我们的标准 json 格式。以下是我们的做法：

var url = "sendAnswer.json";
var questionId = 11; //This is set elsewhere
var fileValue = // Need to get the image file here
$.post(url,{
 "data[Answer][question_id]": questionId,
 "data[Answer][value]" : fileValue
});

如何正确设置 fileupload 中的选项以匹配我需要发送的内容？基本上我需要将上传文件放入数据数组中。默认情况下，我相信它是由插件单独处理的。

Answer 1

首先使用正确的格式创建一个对象，然后传递该对象：

var url = "sendAnswer.json";
var questionId = 11; //This is set elsewhere
var fileValue = // Need to get the image file here
dataObj = {"Answer": {"question_id": questionId, "value": fileValue}};
$.post(url,{
"data": dataObj
});

Answer 2

如果有人试图做类似的事情，请为我问过的问题添加答案。您可以通过回调（例如“添加”）的 data.files 获取图像详细信息。

var theUrl = 'url here';
$('#fileupload').fileupload({
        url: theUrl,
        dataType: 'json',
        autoUpload: false,
}).on('fileuploadadd', function (e, data) {
        // Can do things with the data here, "files" has details about the image
        console.log(data.files);
})