javascript - 如何在 Webix FileManager 中查看上传是否完成

Question

我在 Rails 应用程序中使用 Webix 中的 FileManager。大部分都可以，但是当我上传一个大文件时，无论文件大小如何，也无论它已经将文件上传到服务器，进度条都会移动到最后。然后用户离开屏幕，传输被取消，文件也不会上传。

我如何知道上传已完成并正常？有 onBeforeUpload 事件但没有 onAfterUpload 事件，如何防止用户在上传完成之前离开屏幕？

Answer 1

以下是包含正确事件的代码: 文件管理器.js.coffee

class FileManager
  constructor: (@element) ->
  @token = @element.data('token')
  @type = @element.data('type')
  @usermail = @element.data('usermail')
  webix.ready(@render)

  fmResize: () ->
    t = 40
    h = $(window).height() - t
    w = $(window).width()
    $$("files").define( width: w, height: h )
    $$("files").resize()

  options: () ->
    view: 'filemanager'
    left: 100
    id: 'files'
    container: @element.attr('id')
    handlers:
      branch: @actionUrl('load_folder')
      search: @actionUrl('search')
      upload: @actionUrl('upload')
      download: @actionUrl('download')
      copy: @actionUrl('copy')
      move: @actionUrl('move')
      remove: @actionUrl('remove')
      rename: @actionUrl('rename')
      create: @actionUrl('create')
    url: '/file_manager/load_root_folders'
      return

  actionUrl: (action) ->
    "/file_manager/" + action + "?authenticity_token=" +     encodeURIComponent(@token)

  render: () =>
    webix.i18n.setLocale('pt-BR');
    new webix.ui(@options())

    $$('files').attachEvent 'onErrorResponse', (requestData,response) ->
      action = requestData.action
      webix.message(response)
      return false

    $$('files').getUploader().attachEvent 'onAfterFileAdd', () ->
      $('#uploadModal').modal('show');

    $$('files').getUploader().attachEvent 'onFileUpload', (item,response) ->
      $('#uploadModal').modal('hide');

    $$('files').getUploader().attachEvent 'onFileUploadError', (item,response) ->
      $('#uploadModal').modal('hide');
      webix.alert({
        title: "Carga de Arquivos",
        text: "Erro na carga do arquivo!",
        type: "alert-error"
        });

    $$('files').getUploader().attachEvent 'onUploadComplete', (item,response) ->
      $('#uploadModal').modal('hide');

$(document).ready () ->
  if $('#fileCanvas').length > 0
    fm = new FileManager($('#fileCanvas'))
    $(window).resize ->
      fm.fmResize()

HTML:

<div id="fileCanvas" data-usermail="<%= current_user.email %>" data-token="<%= form_authenticity_token %>" data-type="<%= current_user.member_of_admins? ? :admin : :user %>"></div>
<div id="uploadModal" class="modal fade" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Carga de Arquivos</h4>
      </div>
      <div class="modal-body">
        <p>Agurade o término da carga do arquivo. não feche ou saia dessa janela</p>
      </div>
    </div>
  </div>
</div>