Question

我正在制作一个用于上传文件的基本Web界面，并且我的按钮成功发送了带有包含图像数据的有效负载的POST请求，但是在php脚本中，$ _ FILES数组为空。我使用了chrome dev工具来检查我的html和javascript，但是没有错误。另外，我检查了apache错误日志，也没有任何错误，所以我对出现的问题有些茫然。

我正在关注此示例，并对其进行了一些修改。

https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Example_Uploading_a_user-selected_file

这是html和javascript

<html>

<head>
Image Uploader
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<h1> Upload Your Images Here </h1>

<input type="file" id="fileElem" style="display:none" onchange="handleFiles(this.files)">
<button id="fileSelect"> Select some files </button>

<script>

$("#fileSelect").click(function()
        {
            $("#fileElem").click();

        });

function handleFiles(image)
{
    console.log("Handling Files");

    var reader = new FileReader();
    var xhr = new XMLHttpRequest();

    xhr.open("POST", "getImage.php");
    xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
    reader.onload = function(evt)
    {
        xhr.send(evt.target.result);
        console.log("sent");
    };
    reader.readAsBinaryString(image[0]);


}       

</script>

</body>

</html>

这是php脚本。

<?php

print_r($_FILES);
print_r($_POST);

print(count($_FILES));

echo "Reached End";

?>

这是我从脚本中得到的答复。它只显示空数组。

Array
(
)
Array
(
)
0Reached End

我尝试了不同类型的文件，每次都得到相同的空数组。我确保在php.ini中启用了文件上传，并且帖子和文件大小限制足够高（80M）。如果有帮助，我将在树莓派上运行安装了php 7.0的apache2服务器。

我还检查了Apache错误日志，但没有错误。

Answer 1

index.php

<!DOCTYPE html>
<html>
 <head>
  <title>Upload File without using Form Submit in Ajax PHP - pakainfo.com</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br /><br />
  <h2></h2>
  <div class="container" style="width:700px;">
   <h2 align="center">Upload File without using Form Submit in Ajax PHP</h2>
   <br />
   <label>Select Image</label>
   <input type="file" name="file" id="file" />
   <br />
   <span id="uploaded_image"></span>
  </div>
 </body>
</html>

<script>
$(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 > 2000000)
  {
   alert("Image File Size is very big");
  }
  else
  {
   form_data.append("file", document.getElementById('file').files[0]);
   $.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);
    }
   });
  }
 });
});
</script>

upload.php

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

this

正在将图片上传到网站，但PHP $ _FILES数组为空。

1 个答案: