Print Json data into html format - php

Question

I posted the image in an array from my form using AJAX, and in response I received a JSON data
I received the below code in my console as response;
0"C:\xampp\htdocs\3Dklik\..../1492427792slider_7.jpg"
1"C:\xampp\htdocs\3Dklik\mog/1492427792slider_2.jpg"
2"C:\xampp\htdocs\3Dklik\mo…../public/img/1492427792"
id""
user_id"1"
The following is my AJAX code:
<script type="text/javascript">
$(document).ready(function(e) {
$("#btnsubmit").on('click', function(e) {
e.preventDefault();
var formData = $('#uploadform').serialize();
var files = $("#uploadform")[0];
console.log(files);
$.ajax({
url: '<?php echo $this->url('
upload ');?>',
type: 'POST',
data: new FormData(files),
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
success: function(data) {
alert("Data Uploaded: " + data);
console.log(data);
},
error: function(result) {
alert("Error");
},
cache: false,
contentType: false,
processData: false
});
return false;
});
});
</script>
And the following is my PHP code;
public function uploadAction() {
$request = $this - > getRequest();
if ($request - > isPost()) {
$data = array_merge_recursive(
$request - > getPost() - > toArray(),
$request - > getFiles() - > toArray()
);
// echo'<pre>';print_r($data);
}
$image_array = array_slice($data, 2);
//print_r($image_array);
foreach($image_array as $files) {
//print_r($files);
$file_new_name = round(microtime(true)).$files['name'];
$destination = "public/img/".$file_new_name;
$file_name = $files['tmp_name'];
move_uploaded_file($file_name, $destination);
$data[] = __DIR__.('/../../../../../public/img/').$file_new_name;
}
return new JsonModel(array(
'data' => $data
));
}
Basically the JSON data includes the image path, but I wish to display the image in my <div>. How can I achieve this?

Answer 1

you can sen the JSON format like validate.php in you can use;
echo json_encode(arrayvalue);
$("#btnsubmit").on('click', function(e) {
e.preventDefault();
var formData = $('#uploadform').serialize();
var files = $("#uploadform")[0];
console.log(files);
$.ajax({
url: '<?php echo $this->url('
upload ');?>',
type: 'POST',
data: new FormData(files),
dataType: 'json',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
success: function(data) {
alert("Data Uploaded: " + data);
console.log(data);
$.each(data, function(i, item) {
alert(data[i].imgName);
});
},
error: function(result) {
alert("Error");
},
cache: false,
contentType: false,
processData: false
});
return false;
});