我正在使用Rails 4上的
jquery-file-upload,
我从 https://github.com/tors/jquery-fileupload-rails-paperclip-example开始.所以我使用jquery-rails,jquery-fileupload-rails和paperclip gems.
我从 https://github.com/tors/jquery-fileupload-rails-paperclip-example开始.所以我使用jquery-rails,jquery-fileupload-rails和paperclip gems.
因为我不是jquery或javascript的破解,我正在尝试简化和理解所有内容,更改代码以使用js.erb远程调用rails.
所以,文件列表是rails部分(_videos.html_erb),上传控制器中的索引操作有一个index.js.erb来响应js.
我添加了$.get(‘/ uploads’);在de fileupload完成事件以刷新部分.
一切都运作良好,除非取消按钮,我不明白我要做什么,在哪里.
这是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();
});
这是我的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的基本指导
提前致谢
解决方法
您还可以对数据调用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 ) {
/* ... */
}
});
