首页 文章

将图像上传到网站,但PHP $ _FILES数组为空 .

提问于
浏览
1

我正在制作一个基本的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) . 如果它有助于我运行一个apache2服务器与php 7.0安装所有在树莓派 .

我还检查了apache错误日志,但没有错误 .

1 回答

  • 0

    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>
      

    <h2></h2> <div class="container" style="width:700px;"> <h2 align="center">Upload File without using Form Submit in Ajax PHP</h2>
    <label>Select Image</label> <input type="file" name="file" id="file" />
    <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" />';
    }
    ?>
    

    Upload File without using Form Submit in Ajax PHP

相关问题