<style> #photo-input{ display: block; margin-bottom: 50px; } </style> <script> document.addEventListener('DOMContentLoaded',function(){ document.querySelector('#submit').addEventListener('click',sendUploadInfo); function sendUploadInfo(){ var photo= document.querySelector('#photo-input').files[0]; //<JSON data> var upload_info = { first_name: "John", last_name: "Smith", photo: photo }; //</JSON data> var upload_info_json_object= 'upload_info_json_object='+JSON.stringify(upload_info); //<AJAX> var xhr= new XMLHttpRequest(); xhr.onreadystatechange= function(){ if(xhr.readyState == 4){ document.querySelector('#output').innerHTML= xhr.responseText; } } xhr.open('POST','x'); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(upload_info_json_object); //</AJAX> } }); </script> <input type='file' id='photo-input'> <button id='submit'>Send JSON data</button> <div id='output'></div>
<?php $upload_info_json_object = json_decode($_POST['upload_info_json_object']); $first_name= $upload_info_json_object->first_name; $last_name= $upload_info_json_object->last_name; //Photo upload section //$photo= $upload_info_json_object->photo; //<-???? ///??? if(isset($_FILES['photo'])) { $file=$_FILES['photo']['name']; $location='images/'.$file; move_uploaded_file($_FILES['photo']['tmp_name'],$location); } // ?> <h1><?php echo $first_name.' '.$last_name.' just uploaded a photo.'; ?></h1>
FormData
$_POST
$_FILES
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)