如何將 POST 參數從 javascript 發送到 php

Question

我在將 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
}

Answer 1

請在下面保存為文件：http server (eg 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 ( )

如何將 POST 參數從 javascript 發送到 php

問題描述

1 個解決方案

解決方案1
0 2020-09-08 12:57:22

如何將 POST 參數從 javascript 發送到 php

問題描述

1 個解決方案

解決方案1 0 2020-09-08 12:57:22

解決方案1
0 2020-09-08 12:57:22