Question 8404 in PHP Versions Question posted in
You can find a list of all versions here.

Ajax file upload with Input texts – $_POST & File is empty – PHP Versions

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The error is on

        data: {form_data},

    To change to

        data: form_data,

  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search