Submit form upload with ajax and jquery

Question

Can someone help me submit a form using AJAX? The purpose of the form is to upload a file. The specific problem I'm having is how to capture the action and enctype parameters. My form:

<form role="form" method="post" action="http://localhost:3000/api/some_url" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <input id="submit" type="submit" class="btn btn-primary" value="Submit">
</form>

I need something like:

$.ajax({

  type: "POST",
  url: 'http://localhost:3000/api/some_url',
  action: 'http://localhost:3000/api/some_url',
  enctype: 'multipart/form-data',
  headers: {
          'x-access-token': this.token,
  },
  success: function () {

    console.log('success!')
  },
  error: function (a, b, c) {
    console.log(a)
    console.log(b)
    console.log(c)
  }
})

Can someone help?

Thanks in advance!

For file upload try dropzone.js, which is easy and awsome

Aammad Ullah
– Aammad Ullah

2016-10-20 22:31:24 +00:00
Commented Oct 20, 2016 at 22:31 — Aammad Ullah
– Aammad Ullah, Commented Oct 20, 2016 at 22:31

Suraj Gavhane · Accepted Answer · 2016-10-21 15:37:00Z

Give id to your form

<form id="frm_upload_image" role="form" method="post" action="http://localhost:3000/api/some_url" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <input id="submit" type="submit" class="btn btn-primary" value="Submit">
</form>

after that make following changes in your ajax call

var form = new FormData($("#frm_upload_image"));
   $.ajax({
        url: $("#frm_upload_image").attr('action'),
        type: "POST",                
        data: form,
        contentType: false,       
        cache: false,             
        processData:false,                                  
        success:function() {    
            console.log('success!')
        },
        error: function (a, b, c) {
            console.log(a)
            console.log(b)
            console.log(c)
        }
      });
});

it works for me

Collectives™ on Stack Overflow

Submit form upload with ajax and jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related