Form Ajax Submit With Jquery Form Plugin

I can't remember how I make file ajax upload work last time. So a blog might be the best place to record it.

Because XMLHttpRequest didn't support file upload, and I didn't want to spend much time to hack it. So it might be simple to find a plugin to do it. I compared several plugins supporting file ajax upload.

At last I choose Jquery Form Plugin. Althrough it didn't sound like it supposed to be. Especially there is file field in your form. And the data format that client communicate with server is json

So what does it look like?

JS Client:

                            var options = {
                                beforeSubmit: function(formData, jqForm, options) { 
                                  var queryString = $.param(formData);
                                    alert('About to submit: \n\n' + queryString); 
                                    
                                    for (var i=0; i < formData.length; i++) { 
                                        if (!formData[i].value) { 
                                          return false; 
                                    } 
                                    } 
                                },
                                success: function(data) {
                                        if(data && typeof data == 'object'){
                                            //...
                                        }
                                },
                url:       '/action', 
                dataType:  'json',
                clearForm: true
              }; 
              
                            $('#form').ajaxSubmit(options);
                          return false; 

Symfony Backend:

        $json = json_encode($data);
        if(!$request->isXmlHttpRequest()){
          echo '<textarea>'.$json.'</textarea>';
          return sfView::NONE;
        }else{
        echo $json;
          return sfView::NONE;
        }

You can check plugin document to know why you need 'echo "<textarea>"'. :-D