fabiobusnello/sendFilesAndFields.php

## sendFilesAndFields.php
<?php
@$files = $_FILES['files']; // aqui eu pego todos os arquivos que estiverem no campo files
@$name = $_POST['name']; // aqui eu pego o campo com o name="name" do formulário
$returnJson = array();
if($files){
	array_push($returnJson, $files);
	//var_dump($files);
}
if($name){
	array_push($returnJson, $name);
	//var_dump($name);
}

if($files || $name){
	echo json_encode($returnJson);
	return true;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
  <div>
	<input type="file" multiple accept="image/png,image/jpg" id="files">
	<input type="text" id="name">
	<input type="button" value="Enviar" onclick="send()">
  </div>

  <script>
	const send = () => {
	  //cria um formulário para enviar via ajax
	  const form = new FormData()
	  const files = document.getElementById('files').files
	  //como o campo files é do tipo multiple, ou seja, recebe uma matriz de arquivos então precisamos percorrer esses arquivos e setar dentro do nosso formulário
	  if(files.length){
	    for(i=0; i < files.length; i++){
		  form.append('files', files[i], files[i].name)
		}
	  }

	  // seta o campo name para o formulário
	  form.append('name', document.getElementById('name').value)

	  $.ajax({
	    url: 'sendFilesAndFields.php',
	    type: 'POST',
	    data: form,
	    dataType: 'json',
	    processData: false,
	    contentType: false,
		success: (data)=>{console.log(data)},
		error: (err, textStatus, errorThrown)=>{console.log(errorThrown)}
	  })
	}
  </script>
</body>
</html>
	<?php
	@$files = $_FILES['files']; // aqui eu pego todos os arquivos que estiverem no campo files
	@$name = $_POST['name']; // aqui eu pego o campo com o name="name" do formulário
	$returnJson = array();
	if($files){
	array_push($returnJson, $files);
	//var_dump($files);
	}
	if($name){
	array_push($returnJson, $name);
	//var_dump($name);
	}

	if($files \|\| $name){
	echo json_encode($returnJson);
	return true;
	}
	?>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	</head>
	<body>
	<div>
	<input type="file" multiple accept="image/png,image/jpg" id="files">
	<input type="text" id="name">
	<input type="button" value="Enviar" onclick="send()">
	</div>

	<script>
	const send = () => {
	//cria um formulário para enviar via ajax
	const form = new FormData()
	const files = document.getElementById('files').files
	//como o campo files é do tipo multiple, ou seja, recebe uma matriz de arquivos então precisamos percorrer esses arquivos e setar dentro do nosso formulário
	if(files.length){
	for(i=0; i < files.length; i++){
	form.append('files', files[i], files[i].name)
	}
	}

	// seta o campo name para o formulário
	form.append('name', document.getElementById('name').value)

	$.ajax({
	url: 'sendFilesAndFields.php',
	type: 'POST',
	data: form,
	dataType: 'json',
	processData: false,
	contentType: false,
	success: (data)=>{console.log(data)},
	error: (err, textStatus, errorThrown)=>{console.log(errorThrown)}
	})
	}
	</script>
	</body>
	</html>