将图像上传到图像文件夹 (php) 后，我收到一些未知错误

Question

我正在为我的游戏管创建问答系统。当我尝试将图像上传到 qstimages（图像上传路径文件夹名称）时，问题提交页面上出现了一些奇怪的问题。看看我发布的图片。

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.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>

链接到questionstart.php的js文件

$(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);
    }
   });
  }
 });
});

questionstart.php中包含的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" />';
}
?>

更新（新错误）

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

Answer 1

在我看来，服务器正在使用表单的 html 而不是预期的图像 html 响应您的 ajax 调用。看着你的 ajax 电话，我想我明白了。 url 不应该是 'upload.php' 而不是 'questionstart.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>