如何使用FormData（）将图像和多个输入传递给php

Question

I have a form that allows users to enter an item number, item description, creation date, and also upload an image. I want to push item number, item description, create date, uploaded image, AND a non form input (login ID) to my php file for upload to my database. I had it all working until I tried to add my image. I can't get my image to go through. I was told to use FormData for image but how do I pass the other inputs from the form and the non form input login ID. Here is my original code that was working with exception of the image getting passed in wrong format.

 function AddItem(){
var number = document.forms["additemform"]["item_number"].value;
var description = document.forms["additemform"]["item_description"].value;
var date = document.forms["additemform"]["creation_date"].value;
var useremail= "<?php echo $_SESSION['UserEmail']; ?>";
var image = document.forms["additemform"]["item_image"].value;

      var isValid = false;
  $.ajax({           
      type: "POST",  
      url: "/AddNewItem.php",  
      data: { "Number": number,  "User_Email": useremail, "Description": description,  "Date": date, "Image": image },
      dataType: "json",
      success: function(resp){
        console.log(resp);
        if(resp.reply == "Success")
        {
            isValid = true;
          form.submit();
        }
        else
        {
        isValid = false;
        }
      },
      error: function(data, status){
        console.log(data, status);
        alert("error")
      }

    }); //end Ajax
    console.log(isValid);
     return isValid;
};
</script>

Please notice how UserEmail is not part of the form. I need this sent along with the other data so it can be uploaded at same time.

Now I am trying to update my code to fit format but I am not sure my syntax is right and I don't know how to include the user email.

   function AddItem(){
    var itemdata = new FormData();
    itemdata.append('number', $(document.forms["additemform"]["item_number"].value);
itemdata.append('description', $(document.forms["additemform"]["item_description"].value);
itemdata.append('image', $(document.forms["additemform"]["item_image"].value)[0].files[0]);

1) am I on the right track? Syntax right? 2) how do I add the user email?

Answer 1

You should start with this to add the image/images to the FormData:

var formdata = new FormData();

// Check For Multile Files to Upload
if( document.getElementById("upload_field_id") ) {

    var filedata = document.getElementById("upload_field_id").files;
    var len = filedata.length;

    if( len ) {
        for (var i=0; i < len; i++) {
            var file = filedata[i];
        formdata.append('files[]', file);
        }
    }
}

After this, you can also append the other fields:

// Your code: 
var number = document.forms["additemform"]["item_number"].value;
var description = document.forms["additemform"]["item_description"].value;
var date = document.forms["additemform"]["creation_date"].value;
var useremail= "<?php echo $_SESSION['UserEmail']; ?>";
// End of Your code
formdata.append('number', number);
formdata.append('description', description);
formdata.append('date', date);
formdata.append('useremail', useremail);

That's it. You just put formdata as the value of the data property in your ajax call and catch the $_REQUEST in your .php destination file.