Javascript 将图像上载到图像文件夹（php）后，我收到一些未知错误_Javascript_Php_Mysql_Image

Javascript 将图像上载到图像文件夹（php）后，我收到一些未知错误

javascript php mysql image

Javascript 将图像上载到图像文件夹（php）后，我收到一些未知错误,javascript,php,mysql,image,Javascript,Php,Mysql,Image,我正在为我的游戏机创建问答系统。当我尝试将图像上传到qstimages（图像上传路径文件夹名）时，问题提交页面上出现了一些奇怪的情况。看看我贴的图片这是我用于图像上传功能的编码 questionstart.php（html代码）在这里询问有关游戏、电影、电视节目的任何事情：没有账户，以客人身份发布行动代理广告冒险角色扮演模拟策略体育其他链接到questionstart.php的js文件 $(document).ready(function(){ $(do

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

这是我用于图像上传功能的编码

questionstart.php（html代码）




在这里询问有关游戏、电影、电视节目的任何事情：没有账户，以客人身份发布






行动
代理广告
冒险
角色扮演
模拟
策略
体育
其他

链接到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);
    }
   });
  }
 });
});

<?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" />';
}
?>

$（文档）.ready（函数（）{
$（document）.on（'change'，'#file'，function（）{
var name=document.getElementById（“文件”）.files[0]。名称；
var form_data=new FormData（）；
var ext=name.split（'.'）.pop（）.toLowerCase（）；
if（jQuery.inArray（ext、['gif'、'png'、'jpg'、'jpeg']）==-1）
{
警报（“无效图像文件”）；
}
var of reader=new FileReader（）；
readAsDataURL（document.getElementById（“文件”）.files[0]）；
var f=document.getElementById（“文件”）.files[0]；
var fsize=f.size | | f.fileSize；
如果（fsize>5000000）
{
警报（“图像文件大小非常大”）；
}
其他的
{
form_data.append（“文件”，document.getElementById（“文件”）.files[0]）；
$.ajax({
url:“questionstart.php”，
方法：“张贴”，
数据：表格数据，
contentType:false，
cache:false，
processData:false，
beforeSend:function（）{
$（“#上传的_图像”）.html（“图像上传…”）；
},   
成功：功能（数据）
{
$（'#上传的"图像'）.html（数据）；
}
});
}
});
});

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

更新（新错误）

在我看来，服务器正在使用表单的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);
    }
   });

$.ajax({
url:“upload.php”，
方法：“张贴”，
数据：表格数据，
contentType:false，
cache:false，
processData:false，
beforeSend:function（）{
$（“#上传的_图像”）.html（“图像上传…”）；
},   
成功：功能（数据）
{
$（'#上传的"图像'）.html（数据）；
}
});

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

$.ajax({
url:“upload.php”，
方法：“张贴”，
数据：表格数据，
contentType:false，
cache:false，
processData:false，
beforeSend:function（）{
$（“#上传的_图像”）.html（“图像上传…”）；
},   
成功：功能（数据）
{
$（'#上传的"图像'）.html（数据）；
}
});

我认为问题在于您正在发布（通过ajax）到同一个页面，但您没有将处理上载的代码部分与每当页面加载时运行的php脚本的其余部分隔离开来，因此ajax查询实际上是加载整个页面并发送所有生成的HTML内容作为响应，而您只想返回特定于图像上载的数据

对于您来说，下面代码的重要部分应该是最上面的部分，其中首先有一个逻辑测试来检查请求是否为POST（我建议也可以为其他POST字段添加更严格的逻辑测试），然后刷新之前生成的任何内容的缓冲区（如果在此之前有）-处理上载，然后退出，以停止加载剩余的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>


-问题开始-

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


-问题开始-

抱歉，但我们应该在这些图像中寻找什么？您好，问题已更新，请检查@RamRiderDon，不要使用此代码。您的PHP代码不安全。。永远不要相信javascript允许文件类型。@Raymond Nijl以及如何保护数据库。顺便问一下，我能得到我问题的答案吗？好的，我想我能看到发生了什么。您正在发布到同一页面，对吗？抱歉，但我们应该在这些图像中查找什么？您好，问题已更新，请检查@RamRiderDon，不要使用此代码。您的PHP代码不安全。。永远不要相信javascript允许文件类型。@Raymond Nijl以及如何保护数据库。顺便问一下，我能得到我问题的答案吗？好的，我想我能看到发生了什么。你是在同一个页面上发布的，对吗？你能写下让我有点困惑的代码吗？我收到了一个错误，但没关系，我可以使用错误报告（0）来清除错误