Upload file using jQuery and Ajax

Question

I have a form that I am sending to the server using jQuery $.post method. I am sending several fields with something like:

var myName = "Pedro";
var myDescription = "Description of Pedro";

$.post("~/insert_user", { name: myName, description: myDescription }, function(data){
    alert("Successfully inserted " + data.name + " in DB");
}, "json");

This works great, as I take the values in insert_user.php and treat and insert the in the data base.

What if I need to add a field to my form to let the user upload an image?

How would I do that in my $.post call and how would I get it in the PHP?

I am using Symfony2.0, by the way, just in case it changes something. But the important part is how to add a file typed field to the ajax call.

Thanks in advance.

Pedro

Send the path of that image to insert_user.php through ajax and perform file_upload there — Bhuvan Rikka
– Bhuvan Rikka, Commented Oct 3, 2012 at 11:04
And how the insert_user.php would access file on user system? — S3Mi
– S3Mi, Commented Oct 3, 2012 at 11:18

Ryan · Accepted Answer · 2012-10-06 10:23:28Z

1

You will find it would be a lot easier to use a pre built jquery plugin. My favourite is uploadify http://uploadify.com.

Its simple and easy to use and it will save you a lot of time trying to figure out a method of your own <>

$.post is the same as the code block bellow. In order for you to do what you need to you need to change it to use this atleast and then things will become simpler. So start by changing the $.post to this

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Then add a parameter in the ajax block contentType : "multipart/form-data" or try mimeType (cant remember so clearly) and in the data : $("#form").serialize(), that should work.

please tell me if it didn't work

--NEW EDIT LOL-- Excuse my blind coding, you may need to test this

I did a bit more research and came across this. You need to build this array and add it to the data in your ajax block

var files = new FormData($('#fileinputid'));     
jQuery.each($('#fileinputid')[0].files, function(i, file) {
    files.append(i, file);
});

If what i read was accurate you should be able to pass that array with the rest of the ajax data. Although i am not completely sure how to add it to the serialized data.

Please test this and let me know. if it doesn't work ill do a full javascript script test for you and then post it here

edited Oct 6, 2012 at 10:23

answered Oct 3, 2012 at 11:32

Ryan

1,1197 silver badges10 bronze badges

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

3 Comments

ElPiter Over a year ago

Thank you. But the question is how to combine an already working $.post call with the submitting of a file (an image in this case). I don't really realize how to do it.

ElPiter Over a year ago

Ok. now I am getting it all much better :). Well, I have passed to a $.ajax model and all keeps working. So stage 1 succeeded. The problem now is this: (from jQuery documentation) "Data from file select elements is not serialized." So when I go $("#myForm").serialize(), it does not serializes the image data. So... any other advice?

ElPiter Over a year ago

Thanks a lot for your comments and effort. I finally used this library to get to pass the file to the server malsup.com/jquery/form/#faq. I exactly explains what I needed. Thanks a lot again :)

Zerium · Accepted Answer · 2012-10-03 11:05:50Z

0

This tutorial might help: Nettuts+: Uploading Files With AJAX

answered Oct 3, 2012 at 11:05

Zerium

17.4k33 gold badges119 silver badges187 bronze badges

1 Comment

ElPiter Over a year ago

Thank you. But the question is how to combine an already working $.post call with the submitting of a file (an image in this case). I don't really realize how to do it.

S3Mi · Accepted Answer · 2012-10-03 11:17:26Z

0

Make iframe and put form in it, submit the form and voila. Or you can use one of these AJAX File upload scripts

answered Oct 3, 2012 at 11:17

S3Mi

4884 silver badges10 bronze badges

1 Comment

ElPiter Over a year ago

Thank you. But the question is how to combine an already working $.post call with the submitting of a file (an image in this case). I don't really realize how to do it.

ElPiter · Accepted Answer · 2012-10-06 18:51:14Z

0

I finally used this:

http://malsup.com/jquery/form/#faq

It just works great for what I need.

Thank you guys for your help.

answered Oct 6, 2012 at 18:51

ElPiter

4,33210 gold badges60 silver badges82 bronze badges

Collectives™ on Stack Overflow

Upload file using jQuery and Ajax

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related