使用 AJAX 数据字段一起发送 $_POST 和 $_FILES 以便 PHP 可以获取值？答案

【问题标题】：Send $_POST and $_FILES together using AJAX data field so that PHP can grab the value?使用 AJAX 数据字段一起发送 $_POST 和 $_FILES 以便 PHP 可以获取值？
【发布时间】：2025-12-15 14:40:01
【问题描述】：

我有以下表格，其中有

一个文本字段
日期字段
文件浏览器。

我正在使用 AJAX 将 $_POST 数据值发送到另一个 PHP 文件以插入到 MySQL 数据库中。但我也想移动 $_FILES。

在$.ajax 字段中，有data: 我可以将这些数据分配给另一个PHP 文件。

我可以使用文本字段和日期字段来做到这一点。 $_FILES 怎么办？我的代码如下

AJAX

<script>
    $("#submit").click(function() {
        var prjId = $('#prjId').val();
        var updatedDate = $('#updatedDate').val();
        $.ajax({
            type: 'POST',
            url: "process.php",
            data: {prjId: prjId,updatedDate: updatedDate},
            success: function(response) {('#resulting').html(response);}
        });
    });
</script>

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="icon" type="image/png" href="images/version-control.png">
        <meta charset="utf-8">
        <link href='https://fonts.googleapis.com/css?family=Raleway:400,300,700,900' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <body>
    <body>
        <div class="container" id="contactform">
            <form method="post" enctype="multipart/form-data">
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Project ID</label>
                    <div class="col-sm-7"><?php if(isset($_POST['prjId'])){echo '
                        <input type="text" class="form-control" placeholder="Project ID" name="prjId" id="prjId" value="'.$_POST['prjId'].'">';}else{echo'
                        <input type="text" class="form-control" placeholder="Project ID" name="prjId" id="prjId">';}?>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Updated Date</label>
                    <div class="col-sm-7"><?php if(isset($_POST['udatedDate'])){echo '
                        <input type="date" class="form-control" name = "updatedDate" id="updatedDate" value="'.$_POST['udatedDate'].'">';}else{echo '
                        <input type="date" class="form-control" name = "updatedDate" id="updatedDate">';}?>
                    </div>
                </div>
                <fieldset class="form-group ">
                    <label class="btn btn-default tempPerm" id="techLabelText">
                        <input class="tempPerm" style="" type="file" name="file" id="techInputBoxValue" />
                    </label>
                </fieldset>
            </form>
            <div class="cover">
                <div id="result"></div>
                <input name="submit" id="submit" tabindex="5" value="Send Mail" type="submit" style="width:200px;">
            </div>
        </div>
    </body>
</html>

PHP

<?php include ("../db.php");?>
<?php
    $prjId = $_POST['prjId'];
    $updatedDate = $_POST['updatedDate'];
    if(isset($prjId)){
        $sql="INSERT INTO tbl_uploads(prjId, date) VALUES('$prjId','$updatedDate')";
        mysqli_query($conn, $sql);
    }
?>

【问题讨论】：

formdata 就是你所需要的
但是怎么给formdata呢？我的意思是在普通文本字段的 AJAX 字段中，我可以作为数据提供：{var: text1, var, text2}。但是这里怎么插入formdata呢？
var fd = new FormData(); fd.append('file', input.files[0]);
@Wils 如果我使用这种方式，如何在 php 中访问文件名 temp_name 等？我需要上传文件以及使用 move_uploaded_file 在我的数据库中获取文件名。那么我应该如何输入 php 来获取文件名、tmp_name 等变量呢？
其实是一样的。它接收为 $_POST['file']

标签： php jquery html ajax

【解决方案1】：

下面的代码会自动包含表单中的所有字段，而无需使用 append 函数手动添加它们。

还添加了 $(document).ready(function() 用于故障安全。因此javascript代码只有在整个文档准备好时才会生效。

您可以尝试修改这些工作模板。

<script>
$(document).ready(function() {
  $("#submit").click(function() {
    var FD = new FormData($('form')[0]);
    $.ajax({
      type: 'POST',
      url: "process.php",
      processData: false,
      contentType: false,
      data: FD,
      success: function(response) {
        $('#resulting').html(response);
      }

    });
  });
 });
</script>

process.php

<?php include ("../db.php");?>
<?php
    $prjId = $_POST['prjId'];
    $updatedDate = $_POST['updatedDate'];

    if(isset($_POST['prjId'])){
        $target_dir = "uploads/";
        $target_file = $target_dir.basename($_FILES["file"]["name"]);
        $save_file = basename($target_file); // this holds the filename to save.
        $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
        $is_uploaded = move_uploaded_file($_FILES["file"]["tmp_name"], $target_file));

        // Modify this query string to add the file uploaded as well.  
        // Change the query string to use prepared statements for failure safe and for security reasons.
        $sql="INSERT INTO tbl_uploads(prjId, date) VALUES('$prjId','$updatedDate')";
        mysqli_query($conn, $sql);
    }
?>

^ 添加了一个简单的文件上传处理程序。

【讨论】：

这很好用！！但现在我有另一个问题。如果我有多个文件上传器怎么办？如何区分彼此？
您可以为新的 html 文件字段指定唯一名称。在您的 PHP 处理程序中，您可以使用您分配的名称访问新文件，例如 $_FILES['newuploader']。
或者，您可以使用[] 创建一个文件输入数组，而不是创建一个具有唯一名称的新字段。喜欢 - <input class="tempPerm" style="" type="file" name="file[]"/> <input class="tempPerm" style="" type="file" name="file[]"/>.
非常感谢！这就像魅力一样。我给你的答案打勾！

【解决方案2】：

您可以使用 formdata 将您的文件连同您的请求一起发送，如下所示：

<script >
  $("#submit").click(function() {
    var formData = new FormData();
    var prjid = $('#prjId').val();
    var updatedDate = $('#updatedDate').val();
    formData.append( 'file', input.files[0]);
    formData.append('prjId', prjid);
    formData.append('updatedDate', updatedDate);

    $.ajax({
      type: 'POST',
      url: "process.php",
      data: formData,
      contentType: false,       
      cache: false,             
      processData:false, 
      success: function(response) {
        $('#resulting').html(response);
      }

    });
  });

</script>

【讨论】：

那么在我的 php 中我应该如何访问文件名和参数？
$_POST['file']，可以 print_r($_POST);看看你有什么
$_FILES['file']['name']

【解决方案3】：

如果您使用 ajax 提交表单，它将不会传递 $_FILES

您必须使用 FormData 为其创建对象

注意：请在表单标签中添加 enctype="multipart/form-data

 <form id="upload" enctype="multipart/form-data">

请参考：jQuery AJAX file upload PHP

谢谢

【讨论】：