¿Cómo llamo a una devolución de llamada JS cuando se completa una carga de archivo?

Question

Estoy creando una carga de frontend para una aplicación con back-end de appengine.

Lo que quiero hacer es una solución de carga de archivos, y no quiero usar plupload o ese tipo de soluciones ya preparadas.

Básicamente, presenté las imágenes a un iframe y luego puse una cubierta mientras se está cargando. Luego, después de que termine, realicé una llamada ajax para obtener los ID de imagen para la siguiente vista. Sin embargo, el renderizado siempre se invoca antes de que se complete la carga, por lo tanto, no obtengo ningún ID de imagen del back-end. ¿Alguien puede ayudar?

aquí está mi código para la carga

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) 

la app.views.imageselect.render (item_id) es el siguiente:

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 @ 
    ) 

Yo no quiero ser el uso de la función setTimeout ya que no lo hará ser flexible dependiendo de la velocidad de conexión. Cualquier ayuda será apreciada :)

Answer 1

Básicamente, tu pregunta se reduce a esto: quieres esperar para hacer tu llamada Ajax al servidor hasta que los datos que estás solicitando estén disponibles. Obtener notificaciones del servidor es complicado (dependiendo de cómo se implemente su servidor), por lo que la mejor solución para su problema es simplemente hacer la llamada Ajax periódicamente (por ejemplo, una vez por segundo) hasta que obtenga una respuesta exitosa del servidor.

Aquí hay un código que debe hacer eso:

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

lo que se pierde es una especie de devolución de llamada de la llamada $('#product-input-3').submit(). Me que la siguiente trabajaría (perdón por mi mala 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) 

Esto se basa en la idea de que llamar 'submit' pone inmediatamente el iframe destino en el estado no listo, lo que parece razonable, pero yo lo probaré. Una vez que termine de cargarse, la otra opción que he visto es que la página cargue el iframe y vuelva a llamar a su ventana principal (nivel superior). En JS, algo así como:

parent.imageUploaded() 

O, si desea utilizar los eventos ligados:

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

donde, por supuesto, que haya configurado un evento de carga completa en el nivel superior objeto de documento.

Answer 3

Si solo se dirige a navegadores modernos, entonces FormData de XHR2 puede permitir un enfoque muy simple y elegante.

el concepto es:

• Agregar archivo (s) de datos binarios a un objeto FormData
• hacer un $ .ajax() con el objeto FormData como parámetro "datos" de la llamada AJAX
• cuando se realiza la carga, $.se activarán ajax() 's éxito() o completa() devoluciones de llamada

Este enfoque funciona con la última versión de Firefox, Chrome, Safari - http://caniuse.com/xhr2.

Ver este post para más detalles: Sending multipart/formdata with jQuery.ajax