Question

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

我怎么知道上传完成并且没问题？有一个onBeforeUpload事件但不是onAfterUpload事件，如何阻止用户离开屏幕直到上传完成？

Answer 1

以下是包含正确事件的代码： 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>

Answer 2

您需要处理两个事件

onFileUpload
onFileUploadError

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

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

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

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

以上都是上传器小部件的事件，您可以像

一样访问它们

kernel<<<1,1>>>

如何阻止用户离开屏幕

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

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

如何在Webix FileManager中找到上传完成

2 个答案: