Come si chiama una richiamata JS al termine di un caricamento di file?

Question

Sto creando il caricamento di frontend per un'app con backend appengine.

Quello che voglio fare è una soluzione di upload di file, e non voglio usare plupload o quei tipi di soluzioni già pronte.

In pratica ho inviato le immagini a un iframe e poi ho inserito una copertina durante il caricamento. Quindi, al termine, ho eseguito una chiamata ajax per ottenere gli ID immagine per la prossima vista da rendere. Tuttavia, il rendering viene sempre chiamato prima che il caricamento sia completato, quindi non ricevo alcun ID immagine dal back-end. qualcuno può aiutare?

Ecco il mio codice per l'upload

perform_input3:(event)=> 
    event.preventDefault() 
    $('#product-input-3').hide() 
    $('#product-input-3').submit() 
    $('#upload-cover').show() 
    item_id = $('#item3_id').val() 
    app.views.imageselect.render(item_id) 

l'app.views.imageselect.render (item_id) è al di sotto:

render:(data)=> 
    @item_id = data 
    item_id = @item_id 
    $.ajax(
     url: '/get_image_list/' 
     type: 'GET' 
     dataType: 'json' 
     data: {item_id: item_id} 
     success:(data) => 
      @payload = data 
      $(@el).append imageSelectTemplate(@payload) 
      return @ 
    ) 

non voglio essere l'uso della funzione setTimeout poiché non lo farà essere flessibile a seconda della velocità di connessione. Qualsiasi aiuto sarà apprezzato :)

Answer 1

In sostanza, la domanda si riduce a questa: si desidera attendere per effettuare la chiamata Ajax al server fino a quando i dati richiesti non sono disponibili. Ricevere notifiche dal server è complicato (a seconda di come è implementato il tuo back-end), quindi la soluzione migliore al tuo problema è probabilmente effettuare semplicemente la chiamata Ajax periodicamente (ad esempio una volta al secondo) finché non ottieni una risposta corretta dal server.

Ecco po 'di codice che dovrebbe farlo:

do ajaxCall = => 
    $.ajax 
    url: '/get_image_list/' 
    type: 'GET' 
    dataType: 'json' 
    data: {item_id: item_id} 
    success: (data) => 
     @payload = data 
     $(@el).append imageSelectTemplate(@payload) 
    error: -> 
     setTimeout ajaxCall, 1000 

Answer 2

Cosa ti manca è una sorta di richiamata dalla chiamata $('#product-input-3').submit(). Io che seguente funzionerebbe (pardon il mio cattivo CoffeeScript):

perform_input3:(event)=> 
    event.preventDefault() 
    item_id = $('#item3_id').val() 
    $('#product-input-3').hide() 
    $('#upload-cover').show() 
    $('#product-input-3').submit() 
    $('#target-iframe').ready -> 
     app.views.imageselect.render(item_id) 

Questo si basa sull'idea che chiamare 'submit' mette subito l'iframe di destinazione in stato di non-ready, che sembra ragionevole, ma io lo testerei. Una volta completato il caricamento L'altra opzione che ho visto è che la pagina caricata dagli iframe richiama la sua finestra genitore (di primo livello). In JS, qualcosa di simile a:

parent.imageUploaded() 

Oppure, se si desidera utilizzare gli eventi legati:

parent.$(parent.document).trigger('upload-complete') 

Dove, naturalmente, hai impostato un evento upload-completo sul livello superiore oggetto del documento.

Answer 3

Se si stanno prendendo di mira solo i browser moderni, il FormData di XHR2 può consentire un approccio molto semplice ed elegante.

Il concetto è:

• file del componente aggiuntivo (s) dati binari a un oggetto formdata
• fare un $ .ajax() con l'oggetto formdata come parametro di "dati" della chiamata AJAX
• al termine del caricamento, $.ajax() 's successo() o completa() callback verrà attivato

Questo approccio funziona con l'ultima Firefox, Chrome, Safari - http://caniuse.com/xhr2.

Vedi questo post per i dettagli: Sending multipart/formdata with jQuery.ajax