如何HTML表單文件上傳和從PHP服務器讀取JSON響應

Question

我想上傳到PHP我的server.file和數據上傳通過多部分/表單數據，在PHP服務器上接收的文件和數據，但在我的PHP服務器返回json響應。請幫助我如何閱讀我的網頁中的json響應，如果它的成功（代碼= 0）意味着它重定向另一個頁面.php sever對於android和web頁面都很常見.json響應看起來像{ 「代碼」：0， 「消息」： 「成功」}

<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

嘗試json_decode。

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

通過將第二個參數傳遞給true，您將獲得數組中的響應而不是對象。

陣列將被填充，然後如下：

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

Answer 2

你的JSON響應會是一種怎樣的PHP關聯數組。 使用「json_encode」將數組數據編碼爲JSON，並根據需要返回值。

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

注意：如果您正在使用AJAX調用PHP文件則不要在該文件中使用任何PHP回聲/打印，甚至沒有HTML。僅ECHO「json_encode（）;」沒有其他的。

Answer 3

您應該使用AJAX調用。下面是使用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> 

爲了將用戶重定向，你可以使用：window.location.href = " ... your_url ...";

下面是關於如何使用jQuery的AJAX和多部分數據的解釋：

Sending multipart/formdata with jQuery.ajax

Answer 4

我認爲它應該適合你。使用AJAX，因爲我做

 //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 5

概括起來：

1. 與native JS上傳數據到使用AJAX服務器（> = IE10）或jQuery
2. 捕捉（xhr.responseText在native JS ）和parse the response
3. 重定向與window.location.href = 「success.php」