通过 ajax 发送 FormData 对象和附加参数答案

【问题标题】：Send FormData object AND an additional parameter via ajax通过 ajax 发送 FormData 对象和附加参数
【发布时间】：2016-04-06 10:43:33
【问题描述】：

我已经设法像这样发送一个 FormData 对象：

var formData = new FormData();
formData.append('file', this.files[0]);
$.ajax({
   url: urlUploadProductsFile,
   type: 'POST',
   data: formData,
   cache: false,
   contentType: false,
   processData: false
}, 'json');

现在我要做的是添加一个额外的CustomerId 以发送到服务器。以下将不起作用：

var formData = new FormData();
formData.append('file', this.files[0]);
$.ajax({
   url: urlUploadProductsFile,
   type: 'POST',
   data: { "file": formData, "CustomerId": 2 },
   cache: false,
   contentType: false,
   processData: false
}, 'json');

我还尝试了以下变体：

data: { "file": formData, "CustomerId": 2 }, processData: true

data: JSON.stringify({ "file": formData, "CustomerId": 2 })

data: { "file": JSON.stringify(formData), "CustomerId": 2 }

data: { file: formData, CustomerId: 2 }

任何帮助表示赞赏。

【问题讨论】：

标签： jquery json ajax form-data

【解决方案1】：

试试：

var formData = new FormData();
formData.append('file', this.files[0]);
formData.append('CustomerId', 2);

/*
 note:: appending in form Data will give "csrf token mismatch error". 
 so better you make a input feild of type hidden with name = CustomerId 
 and value =  2 
*/ 

$.ajax({
   url: urlUploadProductsFile,
   type: 'POST',
   data: formData,
   cache: false,
   contentType: false,
   processData: false
}, 'json');

【讨论】：

如果辅助数据不是2这样的简单类型怎么办？如果我还需要发送一个 json 对象怎么办？我将如何在前端对其进行编码，以及如何在控制器中对其进行取消编码？
JSON 是一个简单的字符串。您可以按照那里的指示对其进行转义：freeformatter.com/json-escape.html > 以下字符在 JSON 中保留，并且必须正确转义才能在字符串中使用：退格替换为 \b 换页符替换为 \f 换行符替换为 \n return 替换为 \r 制表符替换为 \t 双引号替换为 \" 反斜杠替换为 \\
对于将来来这里的任何人，我添加的额外参数都放在了req（请求）的params对象中。

【解决方案2】：

您需要将其直接添加到 formData（就像您对 'file' 所做的那样），或者使用查询 (GET) 参数。

【讨论】：