cách thêm nút hủy tải lên vào jquery-file-upload plugin cơ bản

Question

Tôi đang sử dụng jquery-file-upload với Rails 4, Tôi bắt đầu từ https://github.com/tors/jquery-fileupload-rails-paperclip-example. Vì vậy, tôi đang sử dụng jquery-rails, jquery-fileupload-rails và gemclip.

Vì tôi không phải là một vết nứt trên jquery hoặc javascript, tôi đang cố gắng đơn giản hóa và hiểu mọi thứ, thay đổi mã để thực hiện cuộc gọi từ xa đến đường ray với js.erb.

Vì vậy, danh sách tệp là một phần đường ray (_videos.html_erb) và hành động chỉ mục trong bộ điều khiển tải lên có chỉ mục index.js.erb để trả lời bằng js. Và tôi đã thêm $.get('/uploads'); vào de fileupload done sự kiện để làm mới một phần.

mọi thứ hoạt động tốt, trừ khi nút hủy và tôi không hiểu mình phải làm gì và ở đâu.

Đây là những gì docs cho tôi biết:

Làm thế nào để hủy bỏ một upload

ơn có thể được hủy bỏ bằng cách gọi phương pháp hủy bỏ vào một đối tượng jqXHR:

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(); 
}); 

Và đây là index.html.erb của tôi:

Đây, cho thanh tiến trình và văn bản chỉ dẫn, tôi đặt mã chiết xuất dạng 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> 

Tôi giả sử tôi có phải đặt somthing như thế này "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'); 
    } 

    }); 

và sau đó

$(function() { 

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

}) 

nhưng điều này không hoạt động và mã từ tài liệu bị lỗi ở mọi nơi: filesList doesn't exist ... v.v.

Vâng, tôi đoán tôi cần một số hướng dẫn cơ bản về jquery hoặc javascript

Cảm ơn trước

Answer 1

Giải pháp là ở kiến ​​thức về biến javascript phạm vi:

$(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('.... 

Và đơn giản, phương pháp hủy bỏ sử dụng XHR của:

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

Answer 2

Bạn cũng có thể gọi abort() trên data hủy cá nhân kinh doanh dở dang uploa ds.

$('#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) { 
      /* ... */ 
     } 
    });