File upload using Jquery ajax without form

Question

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?

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
– 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
– saravanan mp, Commented Dec 28, 2015 at 11:04

Ibrahim Khan · Accepted Answer · 2015-12-28 10:51:01Z

9

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

answered Dec 28, 2015 at 10:51

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

devpro · Accepted Answer · 2015-12-28 11:44:05Z

2

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

edited Dec 28, 2015 at 11:44

answered Dec 28, 2015 at 10:51

devpro

16.1k3 gold badges29 silver badges39 bronze badges

1 Comment

Subliminal Hash Over a year ago

OP said no form!

Collectives™ on Stack Overflow

File upload using Jquery ajax without form

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related