Submitting an image file with an ajax/json built with jQuery

Question

Is there anyway of submitting a file uploaded via Ajax/json/jQuery?

is there a plug in at all? if I want to submit other data its easy:

$.ajax(
  {
       type: "POST",
       url: "http://www.test.php",
       dataType:"json",
       data: {serial: $('[name=txtLogin]').val()},  
       success: function(data)
       { 
            ... do some stuff ...               
       }          

    });

But I'm guessing that file uploads are a different story. I'd like to pass information from a variety of fields such as textboxes, radio and check boxes as well as the file itself.

Any ideas guys?

David Hoerster · Accepted Answer · 2011-01-24 16:33:04Z

3

There are a few plug-ins out there that can help with this. See this link for a decent round-up.

I've used Andrew Valums AJAX Upload control in several projects. It's a nice control and does the trick. I've also uploaded additional field values (like a file name from a text box, some true/false metadata, etc.) along with the file in a single AJAX POST.

I should add that Valums' control isn't a jQuery plug-in - it's basic JavaScript. I've used it with jQuery's $.ajax calls, though.

UPDATE: Actually, I recently found this project that looks very promising as a successor to Valums' upload plug-in. It's jQuery focused, so I'm not sure if that's a pro or a con, but thought I'd share it. I haven't tried it yet, but the features seem to be a good fit for you.

Hope this helps!

edited Jan 24, 2011 at 16:33

answered Jan 21, 2011 at 15:47

David Hoerster

28.8k9 gold badges71 silver badges103 bronze badges

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

Comments

Brian Donovan · Accepted Answer · 2011-01-20 17:15:22Z

1

Short answer: no, you can't do that.

However, you can use the jQuery form plugin to submit the form to a hidden iframe, which in practice makes it act the way you want.

answered Jan 20, 2011 at 17:15

Brian Donovan

8,4101 gold badge28 silver badges25 bronze badges

1 Comment

David Hoerster Over a year ago

Take a look at valums.com/ajax-upload. It will POST a file asynchronously and you can include other metadata with the POST.

Collectives™ on Stack Overflow

Submitting an image file with an ajax/json built with jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related