How to create html postfile download and read json response from php server

Question

I am trying to upload a file to php my server.file and upload data via multi-part / form data, file and data received on php server, but on my php server server return json.please response help me how to read json- the answer is on my web page, and if its success (code = 0) means that it redirects to another page. php sever is common for android and web pages. The json response looks like {"code": 0, "message": "success"}

<div style="height:0px;overflow:hidden"> <form id="myForm" action="http://192.168.2.4/digiid/api/addid" method="post" enctype="multipart/form-data" runat="server"> <input type="file" name="file" id="file" onchange="showMyImage(this)" /> <input type="hidden" name="userid" value="<?php echo $_SESSION["userid"]?>"> <input type="hidden" id="inputfilename" name="filename" value="here"> </form> </div> <a class="button1" id="browseButton" onclick="" style="width:12%;height: 30px; text-decoration:none;"><font color="white" size="5px">Select ID</font></a> <br/> <div> <img src='images/capture_picture_size.png' id='imgscreen' width='200' height='200'> <br/> <p id="filename" style="color: #ffffff; font-size: 20px" > Title of the ID<br/></p> <a class="button1"onclick="myFunction()" style= " width:12%;height: 30px; text-decoration:none;"><font color="white" size="5px">Save ID</font></a></form> </div> <script> function myFunction() { document.getElementById("myForm").submit(); } </script> <script> browseButton.onclick=function chooseFile() { document.getElementById("file").click(); }; function showMyImage(fileInput) { var files = fileInput.files; var file = files[0]; var imageType = /image.*/; var img=document.getElementById("imgscreen"); var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { //x=e.target.result img.src = e.target.result; var extfilename=file.name; document.getElementById("filename").innerHTML=extfilename.slice(0,-5) ; document.getElementById("inputfilename").value=extfilename.slice(0,-5); }; })(img); reader.readAsDataURL(file); }</script> 

Answer 1

I think this will work for you. Using AJAX, like me,

  //Your php code $arrToJSON = array( "dataPHPtoJs"=>"yourData", "asYouWant"=>"<div class=\".class1\">soemting</div>" ); return json_encode(array($arrToJSON)); //Your javaScript code $(document).on("event", "#idElement", function(){ //Data you want to send to php evaluate var dt={ ObjEvn:"btn_Login", dataJsToPHP: $("#txt_EmailLogin").val() }; //Ajax var request =$.ajax({//http://api.jquery.com/jQuery.ajax/ url: "yourServer.php", type: "POST", data: dt, dataType: "json" }); //Ajax Done catch JSON from PHP request.done(function(dataset){ for (var index in dataset){ dataPHPtoJsJS=dataset[index].dataPHPtoJs; asManyasYouWantJS=dataset[index].asYouWant; } //JavaScript conditions. Here you can control the behaivior of your html object, based on your PHP response if(dataPHPtoJsJS){ $( "#idYourHtmlElement" ).removeClass( "class1" ) $( "#idYourHtmlElement" ).addClass( "class2" ) } }); //Ajax Fail request.fail(function(jqXHR, textStatus) { alert("Request failed: " + textStatus); }); } 

Answer 2

You should probably use an AJAX call. Here is a solution using jQuery:

 <script type="text/javascript"> $(document).ready(function(){ $("#browseButton").click(function(){ var url = ""; var formdata = $("#myForm").serialize(); $.ajax({ url: url, type: 'POST', data: formdata, dataType: 'json', cache: false, contentType: false, processData: false, success: function(response){ if(response.status == "success"){ // Success } else { // Failure } }, error: function(response){ // Error } }); }); }); </script> 

To redirect the user, you can use: window.location.href = " ... your_url ...";

This explains how to use jQuery AJAX and multi-part data:

Submitting multipart / formdata using jQuery.ajax

Answer 3

try json_decode .

  $data = ({"code":0, "message":"success"}); $array = json_decode($data, true); 

passing the second parameter to true, you will get an answer in an array instead of an object.

the array will be populated as follows:

  array (size=2) 'code' => int 0 'message' => string 'success' (length=7) 

Answer 4

Your JSON response will be a kind of associative array in php. Encode the array data in JSON using "json_encode" and return values ​​as needed.

  $arr = array('status' => $status, 'status2' => $status2, ); echo json_encode($arr); 

NOTE. If you use ajax to call a php file, then do not use php echo / print in this file and even HTML. ECHO only "json_encode ();" Nothing more.

Answer 5

Summarizing:

• Upload your data to the server using AJAX with native JS (> = IE10) or jQuery
• Catch (xhr.responseText in native JS ) and parse the answer
• Redirecting with window.location.href = "success.php"