Submit a file element with jquery and ajax: No plugins wanted!

Question

Hi,

I'm trying to do a submit via ajax of a form that contains a file element.

<form id="classic_upload" enctype="multipart/form-data>
 <input type="file" name="file" id="file"/>
 <br/>
<!-- ...other inputs...-->
<button type="button" id="classic_save"> Send </button> 
</form>

What I need to do is to submit this form and check if the file fulfills some requirements, so I wrote an ajax submit for this form

         $('#classic_save').click(function(){

            $.ajax({
              type:"POST",
              url:'<g:createLink action="classicUploadFile" controller="scan"/>',

              success: function(msg){
                        alert("Data Loaded: " + msg);                
              }
            });
          });

However, I have no idea how to send the file through ajax.

Some context

Originally we were using swfUpload for this. However, we ran into some trouble with https and some certificate issues. So we decided to implement a basic html fallback. Plugins are nice, but we need to guarantee that this fall back is bullet proof (thinking of google mail "classic upload").

Any thoughts? Are iframes the way to go (read somewhere google mail uses them for their classic upload)

Thanks in advance.

Answer 1

If you like, there is jQuery Uploadify plugin to do exactly what you are looking for other than other great features.

Answer 2

I use the jQuery AJAX form plugin on my site to upload files.

Answer 3

Here you'll find a really good example/tutorial how to upload one file http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

Hope it works for you. Cheers