如何将 POST 参数从 javascript 发送到 php答案

【问题标题】：How to send POST parameters from javascript to php如何将 POST 参数从 javascript 发送到 php
【发布时间】：2020-09-08 08:53:08
【问题描述】：

我在将 POST 参数从 javascript 发送到 php 页面时遇到问题。所有脚本都可以正常工作，但我需要 POST 参数以进行进一步操作。在 php $_POST 数组中总是显示为空白。我究竟做错了什么？到目前为止，这是我的代码：

HTML：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <div class="container" style="width:700px;">
        <label>Select Image</label>
        <input type="file" name="file" id="file" />
        <br /><br />
        <span id="uploaded_image"></span>
    </div>

Javascript：

$(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", f);
        $.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);
            }
        });
    }
});
});

和 PHP：

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['file'])) {
    $errors = [];
    $extensions = ['jpg', 'jpeg', 'png', 'gif', 'pdf'];
    echo '$_FILES array: ';
    print_r(array_values($_FILES));
    echo '<br>';
    echo '$_POST array: ';
    print_r(array_values($_POST));
    echo '<br>';
}
// rest of code
}

【问题讨论】：

我修正了你的标题。 Java 和 Javascript 之间有很大的不同。
您所做的只是发送一个文件。它们不会出现在$_POST-array 中。它们位于$_FILES 数组中（您也可以转储该数组）。里面有什么？
感谢您的修复。我在编码方面很新，所以我必须学习很多东西。贝娄是关于我的问题的更多细节。

标签： php jquery

【解决方案1】：

请将以下文件另存为文件：http server (e.g. xampp) 文件夹中的upload.php 然后在浏览器上打开

<html> 
<body>

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['file'])) {
        $errors = [];
        $extensions = ['jpg', 'jpeg', 'png', 'gif', 'pdf'];
        echo '$_FILES array: ';
        print_r(array_values($_FILES));
        echo '<br>';
        echo '$_POST array: ';
        print_r(array_values($_POST));
        echo '<br>';
    }
    // rest of code
    }
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<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", f);
        $.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>

    <div class="container" style="width:700px;">
        <label>Select Image</label>
        <input type="file" name="file" id="file" />
        <br /><br />
        <span id="uploaded_image"></span>
    </div>

</body>
</html>

它提供了一些需要的细节

Select Image 

$_FILES array: Array ( [0] => Array ( [name] => zc.jpg [type] => image/jpeg [tmp_name] => C:\xampp\tmp\php9437.tmp [error] => 0 [size] => 17436 ) )
$_POST array: Array ( )

【讨论】：