带有输入文本的 Ajax 文件上传 - $_POST & 文件为空答案

【问题标题】：Ajax file upload with Input texts - $_POST & File is empty带有输入文本的 Ajax 文件上传 - $_POST & 文件为空
【发布时间】：2021-12-30 18:20:30
【问题描述】：

您好，我无缘无故遇到问题。我需要帮助。我正在尝试将文件和文本输入上传到我的数据库，为此我正在使用 ajax 和 PHP 代码。我浏览了许多 StackOverflow 帖子和资料，但仍然无法解决此问题。

HTML：

<form method = "POST" enctype = "multipart/form-data" id="myform">
    <label class="form-label text-start">Enter your Name</label>
    <input class="form-control"  name="name" type="text" id="myname" placeholder="John">
    
    <label class="form-label">Title</label>
    <input class="form-control" type="text" name="name" id="title" placeholder="Operator">

    <label class="form-label">Your Cute Photo (format: jpg and png only, less than 500kb)</label>
    <input class="form-control"  name="file" id="imgfile" type="file">
</form>

JQuery/Javascript：

var file_data = $('#imgfile').prop('files')[0];   
var form_data = new FormData();                  
form_data.append('file', file_data);
form_data.append('name', $('#name').val());
form_data.append('title', $('#title').val());
$.ajax({
        type: 'POST',
        dataType: 'text', 
        cache: false,
        contentType: false,
        processData: false,
        url: 'save_data.php',
        data: {form_data},
        success: function(data){
            //alert(php_script_response);
            alert(data)
            window.location = 'account.php';
        }
                                
});

错误：

Undefined index name
Undefined index title
Undefined index file

PHP：

$name = $_POST['name'];
$title = $_POST['title'];
$file = $_FILE...
//all the other PHP codes

jQuery 版本

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

【问题讨论】：

name="name" 在您的表单中出现了多少次？

标签： php ajax file-upload

【解决方案1】：

您的表单中有两个具有相同名称的元素，因此它是在您请求时使用的彩票。诚然，您使用的是元素 ID 而不是名称，所以可能完全没问题。使用FormData，您可以提供对form 本身的引用作为参数，这应该会为您处理其余的事情。您可以直接提供 formdata 对象作为 ajax 请求中的 data 参数。我不是 jQuery 的用户，所以不得不将你的 jQuery 与一些 vanilla js 混合，但你应该看到这个想法。

const form = document.forms.usrupload;

form.bttn.onclick = () => {
  var form_data = new FormData(form);
  $.ajax({
    type: 'POST',
    dataType: 'text',
    cache: false,
    contentType: false,
    processData: false,
    url: 'save_data.php',
    data: form_data,
    success: function(data) {
      alert(data)
      window.location = 'account.php';
    }
  });
}

label {
  display: block;
  width: 100%;
  margin: 1rem;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!--
  `label` elements should be associated with an input in one of two ways:
  Using the `for="elemID"` or by wholly encompassing the input element as below
-->
<form name="usrupload" method="POST" enctype="multipart/form-data">

  <label class="form-label text-start">Enter your Name
      <input class="form-control" name="name" type="text" placeholder="John" />
  </label>

  <label class="form-label">Title
      <input class="form-control" type="text" name="title" placeholder="Operator" />
  </label>

  <label class="form-label">Your Cute Photo (format: jpg and png only, less than 500kb)
      <input class="form-control"  name="file" type="file" />
  </label>

  <input type='button' name='bttn' value='Submit' />
</form>

【讨论】：

【解决方案2】：

错误开启

    data: {form_data},

改成

    data: form_data,

【讨论】：