Ajax file upload with Input texts - $_POST & File is empty-CodePudding

Hi I have problem for no reasons. I need help. I am trying to upload files and text input to my db and I am using ajax and PHP code for that. I have looked through many StackOverflow posts and stuffs but still unable to fix this.

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';
        }
                                
});

Error:

Undefined index name
Undefined index title
Undefined index file

PHP:

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

JQuery version

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

CodePudding user response：

The error is on

    data: {form_data},

To change to

    data: form_data,

CodePudding user response：

There are two elements in your form with the same name so it is a lottery which is used when you request it. Admittedly you were using the element ID rather than the names so probably perfectly OK. With FormData you can supply a reference to the form itself as the argument and that should take care of the rest for you. You can supply that formdata object directly as the data parameter in the ajax request. I'm not a user of jQuery so had to mix your jQuery with some vanilla js but you should see the idea.

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>