0

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

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

4

2 回答 2

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>
于 2016-01-14T17:41:01.740 回答
1

您需要处理两个事件

  • 文件上传
  • 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(){
  /*...*/
});

如何防止用户离开屏幕

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

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

于 2016-01-14T16:19:26.207 回答