jQuery使用$.post上传文件

jQuery using $.post to upload file

本文关键字：文件 post 使用 jQuery      更新时间：2023-09-26

我需要通过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 中收到消息Illegal invocation

由于这不起作用，我尝试实现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的值，就像我想要的那样并发送文件？

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

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

它应该做所有正确的事情，但只适用于现代浏览器（不知道你是否也需要旧的浏览器）。有关兼容性，请查看http://caniuse.com/#feat=xhr2

已解决。

我再次将解码的JSON值转换为正常的$_POST。

$extraContent = json_decode($_POST['extra'])[0];
foreach($extraContent as $key => $extra)
   $_POST[$key] = $extra;
相关文章：