如何在 Webix FileManager 中发现上传已完成

Question

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

我怎么知道上传完成了？有onBeforeUpload事件但没有onAfterUpload事件，如何防止用户在上传完成前离开屏幕？

Answer 1

您需要处理两个事件

onFileUpload
onFileUploadError

第一个用于上传成功处理程序，第二个用于上传错误处理程序。

http://docs.webix.com/api__ui.uploader_onfileupload_event.html

此外，如果代码允许一次上传多个文件，最好处理 onUploadComplete 事件，而不是 onFileUpload

http://docs.webix.com/api__ui.uploader_onuploadcomplete_event.html

以上是上传器小部件的事件，您可以通过

访问它们

files.getUploader().attachEvent("onUploadComplete", function(){
  /*...*/
});

How do I prevent the user from leaving the screen

没有本地解决方案，您可以使用常见的js方式来处理这种情况——为整个页面定义onunload处理程序。

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onunload

Answer 2

这是包含正确事件的代码： filemanager.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>

如何在 Webix FileManager 中发现上传已完成

How to find out that upload is complete in Webix FileManager

javascript

ruby-on-rails

webix