Inviare file tramite ajax jquery

Come inviare un form con un file o un'immagine tramite jquery?

Utilizzando l'oggetto FormData

Questo é un esempio di codice per un form che invia due variabili, la prima é il file e la seconda é un campo di testo.

$( "#sendImage" ).click(function() {
var formData = new FormData($("form#myForm")[0]);
formData.append( 'text', $("form#myForm")[1] );
 $.ajax({
   url: Routing.generate('_admin_insert_picture_broker_action'),
   type: 'POST',
   data: formData,
   async: false,
   cache: false,
   contentType: false,
   processData: false,
   success: function (returndata) {
     alert(returndata);
   }
 });
});
});

Per quanto riguarda l'URL, sto utilizzando un bundle per symfony per propagare le rotte nel codice javascript.
Se non si utilizza bisogna ovviamente cambiare quella riga.

Jquery autocomplete, modificare la struttura del passaggio delle variabili via GET

Jquery autocomplete é molto utile, ma il metodo standard che viene usato per passare la variabile con le lettere da cercare non sempre va bene, specialmente se si utilizza un sistema MVC.

jQueryAutocomplete

Il codice di default invia una variabile tramite GET alla pagina search.php

quindi:

search.php?term=ab

ipotizzando di aver scritto le lettere 'ab' nel form.

Se si utilizza un sistema di rotte, potrebbe essere necessario modificare il sistema per inviare la variabile.

creando qualcosa del genere

search/ab

Per fare questo bisogna utilizzare la funzione $.getJSON in source:

quindi aggiungere al posto di search.php

function(req, resp) {
    $.getJSON("search/" + encodeURIComponent(req.term), resp);
}

 Il codice finale dovrebbe essere questo:

<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: function(req, resp) {
    $.getJSON("search/" + encodeURIComponent(req.term), resp);
  },
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>