Загрузка изображения на сайт, но массив PHP $ _FILES пуст. - PullRequest
Новая
       33

Загрузка изображения на сайт, но массив PHP $ _FILES пуст.

0 голосов
/ 10 декабря 2018

Я создаю базовый веб-интерфейс для загрузки файлов, и моя кнопка успешно отправляет запрос POST с полезной нагрузкой, содержащей данные изображения, но в сценарии php массив $ _FILES пуст.Я использовал инструменты разработчика Chrome, чтобы проверить мой 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";

?>

Это ответ Iвернуться из сценария.Он просто показывает пустые массивы. 

Array
(
)
Array
(
)
0Reached End

Я пробовал разные типы файлов и каждый раз получал один и тот же пустой массив.Я удостоверился, что загрузка файлов включена в php.ini, а ограничения размера сообщений и файлов достаточно высоки (80 МБ).Если это помогает, я запускаю сервер apache2 с установленным php 7.0 на Raspberry Pi.

Я также проверил журнал ошибок apache, но ошибок нет.

1 Ответ

0 голосов
/ 10 декабря 2018

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

Загрузить файл без использования формы Отправить в AjaxPHP

...