jQuery с использованием $ .post для загрузки файла

Question

Мне нужно отправить данные POST с помощью jQuery на мой 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]; 

Я получаю сообщение Illegal invocation в 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], что все в порядке, так что я просто нужно stringify его.

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

Answer 2

Решено.

Я преобразовал значения JSON, декодированные в нормальный $_POST.

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

foreach($extraContent as $key => $extra) 
    $_POST[$key] = $extra;