how to html form post - file uploading and reading json response from php server

Question

i am trying file uploading to php my server.file and data uploading through multi part /form-data ,the file and data received on php server but in my php server return json response .please help me how to read json response in my webpage and if its success(code=0) means it redirect another page .the php sever is common for both android and web pages .json response look 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>

Can you please reformat your code? Why you try to access $_POST['photo'] ? There is no such input in your form. Access Fileuploads using $_FILE not $_POST — Frnak, Sep 26 '14 at 08:02

score 5 · Answer 1 · answered Oct 02 '14 at 00:56

I think it should work for you. Using AJAX, as I do

     //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);
            }); 
    }

score 3 · Answer 2 · edited May 23 '17 at 10:30

You should probably use an AJAX call. Here's 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>

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

Here's an explanation on how to use jQuery AJAX and multi-part data:

Sending multipart/formdata with jQuery.ajax

score 1 · Answer 3 · answered Oct 01 '14 at 08:28

try json_decode.

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

by passing 2nd parameter to true you will get response in array instead of object.

the array will be then populated as follow:

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

score 1 · Answer 4 · answered Oct 01 '14 at 12:58

Your JSON response would be a kind of associative array in php. Encode your array data into JSON using "json_encode" and return values as you want .

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

NOTE: If you are using ajax to call php file then do not use any php echo/print in that file and not even HTML. ECHO only "json_encode();" Nothing else.

score 1 · Answer 5 · edited May 23 '17 at 11:47

1

To sum it up:

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

edited May 23 '17 at 11:47

Community

1
1

answered Oct 07 '14 at 08:51

ovikoomikko

577
6
11

how to html form post - file uploading and reading json response from php server

5 Answers5

Linked