Here is mycode

function addPackage(elem)
{
    
    var dataimg = new FormData();
    dataimg.append('', $("#browseimg"+elem).prop('files')[0]);
    var startdate=$("#from_date"+elem).val();
    var enddate=$("#to_date"+elem).val();
     $.ajax({
      url: "addpackage/",
      type:"post",
      contentType:false,
      data:{startdate:startdate,enddate:enddate,packageid:elem,img:dataimg},
      success: function(data) {
      }
    });
}

I tried post method ajax to upload image and input field data without form. In ajax call it showing [object object]. How to post image with input field without form in jquery ajax?

Here is mycode

function addPackage(elem)
{
    
    var dataimg = new FormData();
    dataimg.append('', $("#browseimg"+elem).prop('files')[0]);
    var startdate=$("#from_date"+elem).val();
    var enddate=$("#to_date"+elem).val();
     $.ajax({
      url: "addpackage/",
      type:"post",
      contentType:false,
      data:{startdate:startdate,enddate:enddate,packageid:elem,img:dataimg},
      success: function(data) {
      }
    });
}

I tried post method ajax to upload image and input field data without form. In ajax call it showing [object object]. How to post image with input field without form in jquery ajax?

• javascript
• php
• jquery
• ajax

• Why is it important there is no form, you can style your site to look like anything you want and make the form invisible – online Thomas Commented Dec 28, 2015 at 10:58
• its a dynamic table based style thats why each row has different form values @Thomas – saravanan mp Commented Dec 28, 2015 at 11:04

2 Answers 2

You can do it like following. Hope this will help you.

function addPackage(elem)
{
    var dataimg = new FormData();
    dataimg.append('startdate', $("#from_date"+elem).val());
    dataimg.append('enddate', $("#to_date"+elem).val());
    dataimg.append('packageid', elem);
    dataimg.append('img', $("#browseimg"+elem)[0].files[0]);

    $.ajax({
        url: "addpackage/",
        type:"post",
        cache : false,
        contentType : false,
        processType : false,
        data: dataimg,
        success: function(data) {
        }
    });
}

You can try this:

Your JS Code:

<script type="text/javascript">
var data = new FormData(document.getElementById("yourFormID")); //your form ID
var url = $("#yourFormID").attr("action"); // action that you mention in form action.
$.ajax({
    type: "POST",
    url: url,
    data:  data,
    enctype: 'multipart/form-data',
    processData: false,  // tell jQuery not to process the data
    contentType: false,   // tell jQuery not to set contentType
    dataType: "json",
    success: function(response)
    {
        // some code after succes from php
    },
    beforeSend: function()
    {
        // some code before request send if required like LOADING....
    }
});
</script>

Dummy HTML:

<form method="post" action="addpackage/" id="yourFormID">
    <input type="text" name="firstvalue" value="some value">
    <input type="text" name="secondvalue" value="some value">
    <input type="file" name="imagevalue">
</form>

in addpackage php file:

print_r($_POST);
print_r($_FILES);