文件上传完成时如何调用 JS 回调？答案

【问题标题】：How do I call a JS callback when a file upload completes?文件上传完成时如何调用 JS 回调？
【发布时间】：2012-02-02 02:27:53
【问题描述】：

我正在为带有 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 函数，因为它会根据连接速度而变得不灵活。任何帮助将不胜感激:)

【问题讨论】：

“我不想使用 plupload 或那些现成的解决方案” - 为什么不呢？
只是因为我想知道它背后发生了什么。以后我也许会用它:)
还有，谁知道我可以改进可用的解决方案

标签： javascript jquery google-app-engine coffeescript flask

【解决方案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

【讨论】：

优雅，不知道你可以命名你的“做”块。

【解决方案2】：

您缺少的是来自$('#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)

这是基于这样的想法，即调用“提交”会立即将目标 iframe 置于非就绪状态，这似乎是合理的，但我会对其进行测试。一旦完成加载我见过的另一个选项是让 iframe 加载的页面回调到其父（顶级）窗口。在 JS 中，类似：

parent.imageUploaded()

或者，如果你想使用绑定事件：

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

当然，您在顶级文档对象上设置了上传完成事件。

【讨论】：

【解决方案3】：

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

概念是：

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

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

详情见此贴：Sending multipart/formdata with jQuery.ajax

【讨论】：