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（）调用，作为AJAX调用的“数据”参数
上传完成后，$ .ajax（）的success（）或complete（）回调将被触发

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

有关详细信息，请参阅此帖：Sending multipart/formdata with 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')

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

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

3 个答案: