如何将取消上传按钮添加到jquery

本文介绍了如何将取消上传按钮添加到jquery-file-upload basic-plugin的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用带有Rails 4的jquery-file-upload，我是从 github/tors/jquery-fileupload-rails-paperclip-example 。所以我使用的是jquery-rails，jquery-fileupload-rails和paperclip gems。

I'm using jquery-file-upload with Rails 4, I started from github/tors/jquery-fileupload-rails-paperclip-example. So I'm using jquery-rails, jquery-fileupload-rails and paperclip gems.

因为我不是jquery或javascript的破解，所以我试图简化并了解所有内容，更改代码以使用js.erb远程调用rails。

As I am not a crack on jquery or javascript, I'm trying to simplify and understand everything, changing code to make remote calls to rails with js.erb.

这样，文件列表是一个rails partial（_videos.html_erb），上传控制器中的索引操作有一个index.js.erb来响应js。 我在de fileupload 已完成事件中添加了 $。get（'/ uploads'）; 刷新部分。

So that, the file list is a rails partial (_videos.html_erb) and index action in uploads controller has a index.js.erb to respond with js. And I have added $.get('/uploads'); in de fileupload done event to refresh the partial.

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

everything works well, unless the cancel button and I don't understand what I have to do and where.

这是 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：

And this is my index.html.erb:

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

Here, for progress bar and text indications, I put code extracted 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>

我想我必须把这样的东西放在这里var xhr =

I supose I have to put somthing like this "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不存在 ...等

but this doesn't work and the code from docs crash everywhere: filesList doesn't exist...etc

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

Well, I guess I need some basic guidance on jquery or javascript

提前致谢

推荐答案

你可以还可以在数据上调用 abort（）来取消单个正在进行的上传。

You can also call abort() on data to cancel individual in-progress uploads.

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