表单和文件上载PHP Ajax JSON

Question

The following code reads data from a form and saves files in a folder and writes it to a JSON file:

Javascript:

var name = $("#name").val();
var image = $("#image")[0].files[0];
var model =  $("#model")[0].files[0];
var type =  $("#type").val();

var formData = new FormData();
formData.append('name',name);
formData.append('image',image);
formData.append('model',model);
formData.append('type',type);

$.ajax({
 url: 'php/form-process.php',
 data: formData,
 processData: false,
 contentType: false,
 type: 'POST',
 dataType: 'json',
 success: function(data){
 // get server responce here
  alert(data);
 // clear file field
  $("#image").val("");
 }
});

PHP:

$filename = "itemsData";
$itemsFile = '../json/'.$filename.".json";

if( !empty( $_POST ) ){
 $data = json_encode( $_POST );
  if( json_last_error() != JSON_ERROR_NONE ){
   exit;
  }
  if (!isset($_FILES['image']) || !is_uploaded_file($_FILES['image']['tmp_name'])) {
   echo 'No file send...';
   exit;
  }

$uploaddir = '../upload/';

$userfile_tmp = $_FILES['image']['tmp_name'];

$userfile_name = $_FILES['image']['name'];

if (move_uploaded_file($userfile_tmp, $uploaddir . $userfile_name)) {

echo 'File send.';
}else{

echo 'Upload Invalid!';
}

//Get data from existing json file
$file = file_get_contents($itemsFile);

// converts json data into array
$data = json_decode($file,true);

$data[] = array(
 'name' => $_POST['name'],
 'image' => $_POST['image'],
 'model' => $_POST['model'],
 'type' => $_POST['type']
);

//Convert updated array to JSON
$file = json_encode($data, JSON_PRETTY_PRINT);

//write json data into data.json file
file_put_contents($itemsFile,$file);
}

The JSONfile returns:

[
{
    "name": "chair",
    "image": null,
    "model": null,
    "type": "1"
}
]

image is a jpg, png etc;

model is a .js file How I can put in the JSON file the file path ?

[
{
    "name": "chair",
    "image": /image/nameOfFile.jpg,
    "model": /code/nameOfFile.js,
    "type": "1"
}
]

Answer 1

If I understand correctly, you should create the file path directly in the JSON

$data[] = [
    'name' => $_POST['name'],
    'image' => $uploaddir . $userfile_name,
    'model' => $_POST['model'],
    'type' => $_POST['type']
];

As of PHP 5.4 you can also use the short array syntax, which replaces array() with [].

The other option is encoding the uploaded image as base64 and save the entire image into the JSON

Edit since this code is vulnerable you should do something like this

$name = stripslashes($_POST['name']);
$model = stripslashes($_POST['model']);
$type = stripslashes($_POST['type']);

$data[] = [
    'name' => $name,
    'image' => $uploaddir . $userfile_name,
    'model' => $model,
    'type' => $type
];