javascript - jQuery 使用 $.post 上传文件

Question

我需要通过 jQuery 将 POST 数据发送到我的 PHP 服务器。这就是我目前收到的(这就是我想要的):

client_id: 55
client_name: 'Josh'
age: '35'
extra: array(0) -> array(['preview'] -> true, ['lookup'] -> false)

为了实现这一点，我有以下代码:

var elements    = [];
var listOfExtra = []

listOfExtra.push({'preview': true, 'lookup': false});

elements['client_id']   = 55;
elements['client_name'] = 'Josh';
elements['age']         = 35;
elements['extra']       = listOfExtra;

$.post(url, $.extend({}, elements));

但现在我还需要发送用户上传的文件，因此通过这样做:

elements['file'] = event.target.files[0];

我在 javascript 中收到消息非法调用

由于这不起作用，我尝试实现 formData():

var formData = new FormData();

formData.append('client_id', 55);
formData.append('client_name', 'Josh');
formData.append('age', 35);
formData.append('extra', listOfExtra);
formData.append('file', event.target.files[0]);

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

发生的情况是，现在 extra 是一个 [object][object]，这没问题，所以我只需要对其进行字符串化即可。

formData.append('extra', JSON.stringify(listOfExtra));

现在的问题是我有很多代码使用 $_POST['extra'][0]['preview'] (例如)，现在我需要解码所有代码之前并使用很多条件，例如:

$extra = isset(json_decode($_POST['extra'])[0]['preview']);

if($extra != null)
   $extraContent = json_decode($_POST['extra'])[0];

$preview = (isset($extraContent) ? $extraContent->preview : $extra[$_POST['extra'][0]['preview']);

有什么方法可以通过使用 formData() 或 $.post 我可以像我想要的那样保留从 javascript 发送到 PHP 的值并发送文件吗？

Answer 1

一个简单的方法是，不使用 jQuery，而只是简单

var xhr = new XMLHttpRequest();
xhr.send(formData);

它应该做所有正确的事情，但仅适用于现代浏览器(不知道您是否也需要旧浏览器)。有关兼容性，请参阅 http://caniuse.com/#feat=xhr2