如何向 jquery-file-upload basic-plugin 添加取消上传按钮

Question

我在 Rails 4 中使用 jquery-file-upload， 我从https://github.com/tors/jquery-fileupload-rails-paperclip-example开始。所以我正在使用 jquery-rails、jquery-fileupload-rails 和回形针 gems。

由于我不是 jquery 或 javascript 方面的专家，我试图简化和理解所有内容，更改代码以使用 js.erb 远程调用 Rails。

因此，文件列表是一个 Rails 部分 (_videos.html_erb)，并且上传控制器中的索引操作有一个 index.js.erb 来响应 js。 我在 de fileupload done 事件中添加了$.get('/uploads'); 以刷新部分。

一切正常，除非取消按钮而且我不明白我必须做什么以及在哪里。

这是docs告诉我的：

如何取消上传

可以通过在 jqXHR 对象上调用 abort 方法来取消上传：

var jqXHR = $('#fileupload').fileupload('send', {files: filesList})
    .error(function (jqXHR, textStatus, errorThrown) {
        if (errorThrown === 'abort') {
            alert('File Upload has been canceled');
        }
    });
$('button.cancel').click(function (e) {
    jqXHR.abort();
});

这是我的 index.html.erb：

这里，对于进度条和文本指示，我把代码提取形式放在file-upload-basic-plugin

<div class="container">
<h2 id="titol">Upload file</h2>
<%= form_for Upload.new, :html => { :multipart => true, :id => "fileupload"  } do |f| %>
  <div class="row fileupload-buttonbar">
      <%= f.file_field :upload %>
      <button class="cancel">Cancel upload</button>
  </div>

  <hr/>
<% end %>

<div id="videos">
  <%= render partial: "videos" %>
</div>

<!--..........This is necessary even though I don't know why -->
<script id="template-upload" type="text/x-tmpl">
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
</script>
<!--............................................................... -->

<script type="text/javascript" charset="utf-8">

  $('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        data.submit();
    },
    done: function (e, data) {
        data.context.text('Upload finished.');
        $.get('/uploads');
    }

  });

  $('#fileupload').fileupload({
    progressall: function (e, data) {
      $("#titol").text(data.loaded);
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('#progress .bar').css(
          'width', progress + '%');
      }
  });

</script>

我想我必须放这样的东西“var xhr =”

  $('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        var xhr = data.submit();
    },
    done: function (e, data) {
        data.context.text('Upload finished.');
        $.get('/uploads');
    }

  });

然后

$(function () {

  $('button.cancel').click(function (e) {
    jqXHR.abort();
  });

})

但这不起作用，文档中的代码到处崩溃：filesList doesn't exist...等

好吧，我想我需要一些关于 jquery 或 javascript 的基本指导

提前致谢

Answer 1

您还可以在data 上致电abort() 以取消正在进行的个别上传。

   $( '#fileUpload' ).fileupload( {
        dataType: 'json',
        add: function( e, data ) {
            var abortBtn = $( '<a/>' )
                .attr( 'href', 'javascript:void(0)' )
                .append( 'Abort' )
                .click( function() {
                    data.abort();
                    data.context.remove();
                } );

            data.context = $( '<div/>' )
                .appendTo( document.body );

            data.context.append( $( '<p/>' ) )
                .append( 'Uploading ' + data.files[0].name )
                .append( abortBtn );

            data.submit();
        },
        done: function( e, data ) {
            /* ... */
        }
    });

Answer 2

解决方案是关于 javascript 变量范围的知识：

$(function () {

  var xhr;                    // <------------ initialize variable

  $('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        xhr = data.submit(); //<-------------- asign result to var xhr
    },
    done: function (e, data) {
        data.context.text('....

简单地说，使用 xhr 的 abort 方法：

  $('button.cancel').click(function (e) {
    xhr.abort();
    alert("abortat");
  });