Как мне вызвать обратный вызов JS, когда загрузка файла завершена?

Question

Я создаю загрузку веб-интерфейса для приложения с бэкэндом appengine.

Я хочу создать решение для загрузки файлов, и я не хочу использовать plupload или такие готовые решения.

Я в основном отправлял изображения в iframe, а затем помещал обложку во время загрузки.Затем, после его завершения, я выполнил вызов ajax, чтобы получить идентификаторы изображений для следующего представления.Однако рендер всегда вызывается до завершения загрузки, поэтому я не получаю никаких идентификаторов изображений из бэкэнда.может кто-нибудь помочь?

вот мой код для загрузки

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)

app.views.imageselect.render (item_id) ниже:

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

Я не хочуиспользовать функцию setTimeout, поскольку она не будет гибкой в ​​зависимости от скорости соединения.Любая помощь будет оценена :)

Answer 1

По сути, ваш вопрос сводится к следующему: вы хотите подождать, пока ваш Ajax-вызов не поступит на сервер, пока не будут доступны запрашиваемые вами данные.Получение уведомлений с сервера довольно сложно (в зависимости от того, как реализован ваш бэкэнд), поэтому лучшим решением вашей проблемы, вероятно, является периодический вызов Ajax (скажем, раз в секунду), пока вы не получите успешный ответ от сервера.

Вот код, который должен это сделать:

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

Если вы ориентируетесь только на современные браузеры, тогда FormData XHR2 может обеспечить очень простой и элегантный подход.

Концепция:

• добавить двоичные данные файла (ов) вобъект FormData
• делает вызов $ .ajax () с объектом FormData в качестве параметра «data» вызова AJAX
• , когда загрузка завершена, успех $ .ajax ()) или complete () будут вызваны обратные вызовы

Этот подход работает с последними версиями Firefox, Chrome, Safari - http://caniuse.com/xhr2.

Подробности см. в этом сообщении: Отправка нескольких частей/ formdata с jQuery.ajax

Answer 3

То, что вам не хватает, это какой-то обратный вызов из вызова $('#product-input-3').submit().Я думаю следующее будет работать (простите мой плохой 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)

Это основано на идее, что вызов 'submit' немедленно переводит целевой iframe в состояние неготовности,что кажется разумным, но я бы проверил это.Как только он заканчивает загрузку. Другой вариант, который я видел вокруг, это сделать так, чтобы страница, которую загружает iframe, перезванивала в родительское окно (верхнего уровня).В JS что-то вроде:

parent.imageUploaded()

Или, если вы хотите использовать связанные события:

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

Где, конечно, вы настроили событие завершения загрузки наобъект документа верхнего уровня.