当文件上传完成时，如何调用JS回调？ [英] How do I call a JS callback when a file upload completes?

问题描述

我正在为appengine后端的应用程式建立前端上传。

我想要的是一个档案上传解决方案，我不想使用plupload或这些种类的现成解决方案。

我基本上将图片提交到iframe，然后在上传时盖上。然后在它完成后，我执行了ajax调用，以获取要呈现的下一个视图的图像id。但是，渲染在上传完成之前总是调用，因此我没有从后端获取任何图像ID。

  perform_input3： （event）=> 
 event.preventDefault（）
 $（'＃product-input-3'）。hide（）
 $（'＃product-input-3'）。submit b $（'＃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函数，因为它将不会根据连接速度灵活。任何帮助将感激：）

解决方案

基本上，你的问题归结为：你想等待让Ajax调用到服务器，直到您请求的数据可用。从服务器获取通知是棘手的（取决于如何实现后端），因此，您的问题的最佳解决方案可能是定期（例如，每秒一次）使Ajax调用，直到您从服务器获得成功的响应。

这里有一些代码应该这样做：

 做ajaxCall = => 
 $ .ajax 
 url：'/ get_image_list /'
 type：'GET'
 dataType：'json'
 data：{item_id：item_id} 
 success：（data）=> 
 @payload = data 
 $（@ el）.append imageSelectTemplate（@payload）
错误： - > 
 setTimeout ajaxCall，1000 
  

I'm creating frontend upload for an app with appengine backend.

What I want to make is a file upload solution, and I dont want to be using plupload or those kinds of ready-made solutions.

I basically submitted the images to an iframe and then put a cover while it is uploading. Then after it finishes I performed an ajax call to get the image ids for the next view to be rendered. However, the render is always called before the upload is completed, thus I'm not getting any image ids from the backend. can anyonehelp?

here's my code for the upload

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)

the app.views.imageselect.render(item_id) is below:

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

I dont want to be using setTimeout function since it will not be flexible depending on the connection speed. Any help will be appreciated :)

解决方案

Essentially, your question boils down to this: You want to wait to make your Ajax call to the server until the data you're requesting is available. Getting notifications from the server is tricky (depending on how your backend is implemented), so the best solution to your problem is probably to just make the Ajax call periodically (say, once per second) until you get a successful response from the server.

Here's some code that should do that:

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

这篇关于当文件上传完成时，如何调用JS回调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！