文件上传完成后如何调用JS回调？

Question

我正在为带有appengine后端的应用创建前端上传。

我想要的是一个文件上传解决方案，我不想使用plupload或那些现成的解决方案。

我基本上将图像提交给iframe，然后在上传时盖上封面。 然后，在完成后，我执行了一个ajax调用，以获取要渲染的下一个视图的图像ID。 但是，在上传完成之前总是调用渲染，因此我没有从后端获取任何图像ID。 谁能帮忙？

这是我上传的代码

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

如果您只针对现代浏览器，那么XHR2的FormData可以实现非常简单和优雅的方法。

这个概念是：

• 将文件二进制数据添加到FormData对象
• 使用FormData对象作为AJAX调用的“data”参数进行$ .ajax（）调用
• 上传完成后，将触发$ .ajax（）的success（）或complete（）回调

这种方法适用于最新的Firefox，Chrome，Safari - http://caniuse.com/xhr2 。

有关详细信息，请参阅此文章： 使用jQuery.ajax发送multipart / formdata

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

当然，您已在顶级文档对象上设置了upload-complete事件。