因为我不是jquery或javascript的破解,我正在尝试简化和理解所有内容,更改代码以使用js.erb远程调用rails.

所以,文件列表是rails部分(_videos.html_erb),上传控制器中的索引操作有一个index.js.erb来响应js.
我添加了$.get(‘/ uploads’);在de fileupload完成事件以刷新部分.

一切都运作良好,除非取消按钮,我不明白我要做什么,在哪里.

这是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',data) {
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        var xhr = data.submit();
    },data) {
        data.context.text('Upload finished.');
        $.get('/uploads');
    }
 
  });

然后

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

但这不起作用,文档中的代码到处崩溃：filesList不存在……等等

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

提前致谢