CODEWITHSUNDEEP
javascriptjqueryfile-upload
Daniel James Clarke
Daniel James Clarke

Reputation: 165

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

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?

Upvotes: 2

Views: 4267

Answers (2)

David Hoerster
David Hoerster

Reputation: 28701

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!

Upvotes: 3

Brian Donovan
Brian Donovan

Reputation: 8390

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.

Upvotes: 1

Related Questions