画像フォルダ（php）に画像をアップロードした後に何か不明なエラーが表示されます

Question

私のゲームチューブ用の質問と回答システムを作成しています。 qstimages（画像アップロードパスのフォルダ名）に画像をアップロードしようとすると、何か疑問に思ってページを送信してしまいました。私はposteを持っている画像を見てください。

this is image 1 - this is the normal condition before upload image

this is image 2 - after uploading the image sucessfully to image folder you can see the script is repeating the form again after advertisement the banner

これは私が画像のアップロード機能のためquestionstartに連結

questionstart.php（HTMLコード）

<div class="container" id="contain"> 
    <div class="row"> 
    <div class="col-md-8 content"> 
    <div class="form-group"> 
    <form action="func/function.php" method="POST" enctype="multipart/form-data"> 
    <br /> 
    <label for="usr"> Ask anything about Games and Movies , Tv shows here : &nbsp; <span> Dont have an account , Post as a Guest </span> <?php //echo $pleasefill;?> </label> 
    <input type="text" name="qst" autocomplete="off" class="form-control" id="usr" placeholder="Enter your question here " required/> 

    <textarea class="form-control textarea" name="qsttextarea" rows="5" id="usr_dis" placeholder="Describe what is wrong ....." onKeyDown="textCounter(this.form.qsttextarea,this.form.countDisplay);" onKeyUp="textCounter(this.form.qsttextarea,this.form.countDisplay);" required></textarea> 
    <hr> 
     <div class="container" style="width: 100%; 
            margin-left: -15px; 
            border: 1px solid #e1e1e100; 
            margin: 2px; 
            background: #f1f1f1; 
            padding-bottom: 10px;"> 
     <br /> 
     <input type="file" name="file" id="file" /> 
     <br /> 
     <span id="uploaded_image"></span> 
     </div> 
    <hr> 
    <div class="col-md-12" id="div_tablesplitter"> 
    <div class="col-md-6"> 
    <input type="text" name="moreabout" class="form-control" id="more" placeholder="Give a short text about the questions" required/> 
    </div> 
    <div class="col-md-6 pull-right"> 
    <select> 
     <option value="volvo">Action </option> 
     <option value="saab"> Act-adven </option> 
     <option value="saab"> Adventure </option> 
     <option value="saab"> Role play </option> 
     <option value="saab"> Simulation </option> 
     <option value="saab"> Strategy </option> 
     <option value="saab"> Sports  </option> 
     <option value="saab"> Other  </option> 
    </select> 
    </select> 

    <input readonly type="text" class="countDisplay" name="countDisplay" size="3" maxlength="3" value="3000"> 
    </div> 
    </div>  
    <input type="submit" name="submit" value="Submit question" id="submit_button"> 
    <input type="reset" value="Reset" onclick="clearText()" class="reset" /> 
    </form> 
    </div> 

JSファイルを使用している符号化です.php

$(document).ready(function(){ 
$(document).on('change', '#file', function(){ 
    var name = document.getElementById("file").files[0].name; 
    var form_data = new FormData(); 
    var ext = name.split('.').pop().toLowerCase(); 
    if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1) 
    { 
    alert("Invalid Image File"); 
    } 
    var oFReader = new FileReader(); 
    oFReader.readAsDataURL(document.getElementById("file").files[0]); 
    var f = document.getElementById("file").files[0]; 
    var fsize = f.size||f.fileSize; 
    if(fsize > 5000000) 
    { 
    alert("Image File Size is very big"); 
    } 
    else 
    { 
    form_data.append("file", document.getElementById('file').files[0]); 
    $.ajax({ 
    url:"questionstart.php", 
    method:"POST", 
    data: form_data, 
    contentType: false, 
    cache: false, 
    processData: false, 
    beforeSend:function(){ 
    $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>"); 
    }, 
    success:function(data) 
    { 
    $('#uploaded_image').html(data); 
    } 
    }); 
    } 
}); 
}); 

PHPコードコード

<?php 
//upload.php 
error_reporting(0); 
if($_FILES["file"]["name"] != '') 
{ 
$test = explode('.', $_FILES["file"]["name"]); 
$ext = end($test); 
$name = rand(100, 999) . '.' . $ext; 
$location = './qstimages/' . $name; 
move_uploaded_file($_FILES["file"]["tmp_name"], $location); 
echo '<img src="'.$location.'" height="100" width="100" class="img-thumbnail" />'; 
} 
?> 

UPDATE（新しいエラー）

when i refresh the page an error message shown , please check the image

Answer 1

をquestionstart.phpするために含まれるサーバが持つあなたのAJAX呼び出しに応答しているように私には見えます予想される画像htmlの代わりにフォームのhtml。あなたのアヤックスコールを見て、私はなぜそれが見えると思う。 urlは 'questionstart.php'ではなく 'upload.php'ではないのでしょうか？

$.ajax({ 
    url:"upload.php", 
    method:"POST", 
    data: form_data, 
    contentType: false, 
    cache: false, 
    processData: false, 
    beforeSend:function(){ 
    $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>"); 
    }, 
    success:function(data) 
    { 
    $('#uploaded_image').html(data); 
    } 
    }); 

Answer 2

私は、問題は、あなたが同じページに（AJAX経由）掲示されていますが、いつでも、ページのロードを実行するPHPスクリプトの残りの部分からアップロードを処理するコードの一部を分離していないということだと思います実際にはajaxクエリはページ全体をロードし、生成されたすべてのHTMLコンテンツをレスポンスとして送信しますが、イメージアップロード専用のデータを返す必要があります。

あなたのために、以下のコードの重要な部分は、最初にリクエストがPOSTかどうかを確認するための最初の部分です（他のPOSTフィールドについてもより厳しいロジックテストを追加できます）。以前に生成されたコンテンツのバッファー（この時点以前のものがある場合） - アップロードを処理し、次にEXIT/DIEの残りのHTMLコンテンツのロードを停止します。

<?php 
    if($_SERVER['REQUEST_METHOD']=='POST' && !empty($_POST['submit'])){ 
     /* 
      ensure that the response sent back to the ajax callback is 
      ONLY the data you want to send and not the entire page! 
     */ 

     # Flush the output buffers 
     ob_clean(); 


     /* 
      This is where you would process the image upload 
     */ 


     /* Whatever data you need to send back to the ajax callback */ 
     echo $response; 


     #EXIT to ensure response data is only generated here 
     exit(); 
    } 
?> 
<!doctype html> 
<html> 
    <head> 
     <title> - question start - </title> 
    </head> 
    <body> 
     <!-- html content --> 
     <!-- 

      The html content includes the form and all 
      other page elements which are being repeated 
      after the ajax request has been sent. 

     --> 
    </body> 
</html>