Wie man eine Schaltfläche zum Abbrechen des Uploads hinzufügt jquery-file-upload basic-plugin

Question

Ich benutze jquery-file-upload mit Rails 4, Ich begann von https://github.com/tors/jquery-fileupload-rails-paperclip-example. Also benutze ich jquery-rails, jquery-fileupload-rails und Paperclip-Edelsteine.

Da ich kein Riss auf Jquery oder Javascript bin, versuche ich alles zu vereinfachen und zu verstehen, Code zu ändern, um Remote-Aufrufe an Schienen mit js.erb zu machen.

Also, die Dateiliste ist eine Schiene teilweise (_videos.html_erb) und Indexaktion in Uploads Controller hat eine index.js.erb mit js zu antworten. Und ich habe $.get('/uploads'); in de Fileupload done Ereignis hinzugefügt, um die teilweise zu aktualisieren.

alles funktioniert gut, , es sei denn, die Abbrechen-Taste und ich verstehe nicht, was ich tun muss und wo.

Das ist, was mir sagen docs:

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

Und:

Wie durch Aufrufen der Abbruchmethode auf einem jqXHR Objekt abgebrochen werden einen Upload

Uploads stornieren das ist mein index.html.erb:

Hier, für Fortschrittsbalken und Textanzeigen, habe ich Code extrahiert Form 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> 

Ich nehme an Ich habe Wichtigeres zu setzen, wie dieses "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'); 
    } 

    }); 

und dann

$(function() { 

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

}) 

aber Das funktioniert nicht und der Code von Docs stürzt überall ab: filesList doesn't exist ... usw.

Nun, ich glaube, ich brauche einige grundlegende Hinweise auf Jquery oder Javascript

Vielen Dank im Voraus

Answer 1

Die Lösung in Wissen über JavaScript-Variablen Umfang war:

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

Und einfach, Abbruch der Verwendung xhr Methode:

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

Answer 2

Sie können auch abort() auf data nennen einzelne in-progress uploa abbrechen 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) { 
      /* ... */ 
     } 
    });