FineUploader基本调用cancelAll() [英] FineUploaderBasic calling cancelAll()
问题描述
我正在使用FineUploaderBasic集成到我现有网站的上传.我的问题是取消当前的上传文件.这是我的代码:
I am using FineUploaderBasic to integrate uploading to my existing web site. The problem I have is with cancelling current uploading file. This is my code:
<div id="button" class="btn btn-large btn-primary">
<i class="icon-upload icon-white"></i>
Upload
<i class="icon-upload icon-white"></i>
</div>
<a href="#" id="cancelling">cancel</a>
<div id="uploader"></div>
<script>
window.onload = function () {
var uploader = new qq.FineUploaderBasic({
debug: true,
element: document.getElementById('uploader'),
button: document.getElementById('button'),
request: {
endpoint: 'upload'
},
multiple: false,
maxConnections: 1,
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'jpe',
'mp3', 'wma', 'wav',
'mp4', 'flv', '3gpp', 'webm',
'zip', 'rar', 'gz', 'tar', 'tgz', 'iso'
],
callbacks: {
onSubmit: function (id, fileName) {},
onUpload: function (id, fileName) {},
onProgress: function (id, fileName, loaded, total) {
$('#cancelling').click(function () {
cancelAll();
});
},
onComplete: function (id, fileName, responseJSON) {},
onError: function (id, name, reason, xhr) {},
onCancel: function (id, fileName) {
alert('cancelled');
}
}
});
}
</script>
但是以上操作不适用于取消链接.当我在进行上传的过程中按取消时，我的JavaScript控制台会显示此错误:
But above does not work for cancel link. When I press cancel while progressing upload, my javascript console gives this error:
ReferenceError: cancelAll is not defined
我在官方文档中找不到有关调用cancelAll()的任何描述.
I could not find any descriptions of calling cancelAll() in official documentation.
我怎么称呼它?什么是正确的实施方式?
How can I call it? What is the right implementation?
修改: 这是我的工作代码:
This is my working code:
<div id="uploader">
<div id="button" class="btn btn-large btn-primary">
<i class="icon-upload icon-white"></i>
Загрузить файл
<i class="icon-upload icon-white"></i>
</div>
<h4><div id="progress" class="hide"></div></h4>
<a id="cancel_link" href="#" class="hide"><h4>Cancel uploading</h4></a>
</div>
<script>
window.onload = function()
{
var uploader = new qq.FineUploaderBasic
({
element: document.getElementById('uploader'),
button: document.getElementById('button'),
request:
{
endpoint: 'upload'
},
multiple: false,
maxConnections: 1,
validation:
{
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'jpe',
'mp3', 'wma', 'wav',
'mp4', 'flv', '3gpp', 'webm',
'zip', 'rar', 'gz', 'tar', 'tgz'],
sizeLimit: 20971520 // 20 MB = 20 * 1024 * 1024 bytes
},
messages:
{
sizeError: 'Error: {sizeLimit}',
typeError: '{file} error. valid: {extensions}.'
},
callbacks:
{
onSubmitted: function(id, fileName)
{
$('#cancel_link').show();
$('#button').hide();
$('#progress').show();
$('#progress').html('Submitted...');
var cancel_btn = document.getElementById('cancel_link');
var self = this;
qq(cancel_btn).attach('click', function(){
self.cancel(id);
});
},
onProgress: function(id, fileName, loaded, total)
{
if(loaded<total)
{
progress = '"' + fileName + '" загружено ' + Math.round(loaded / total*100) +'%';
$('#progress').html(progress);
}
else
{
$('#progress').html('Подождите...');
}
},
onComplete: function(id, fileName, responseJSON)
{
$('#cancel_link').hide();
if(responseJSON.success)
{
$('#progress').html('Подождите...');
window.location.replace(responseJSON.url);
}
},
onError: function(id, name, reason, xhr)
{
$('#cancel_link').hide();
$('#progress').hide();
$('#button').show();
alert(reason);
},
onCancel: function(id, fileName)
{
$('#cancel_link').hide();
$('#progress').hide();
$('#button').show();
}
}
});
}
</script>
一切都可以在Firefox中使用，但是在Android中无法显示上传进度(百分比)可能是什么问题?据我所知，fineuploader支持ios和android.
Everything works in Firefox, but progress of uploading (percents) does not show in Android what can be problem? As far as I know fineuploader support ios and android.
推荐答案
您正在获得ReferenceError，因为cancelAll不在体内范围内
的onProgress处理程序，但是现在不用担心，因为...
You are getting the ReferenceError because cancelAll is not in the scope of the inner-body
of the onProgress handler, but don't worry about that just yet because ...
在上传过程中随着进度的进行调用.
called during the upload, as it progresses.
这样做，
onProgress: function (id, fileName, loaded, total) {
$('#cancelling').click(function () {
// ...
});
实际上，每次触发onProgress回调时，您实际上是将单击处理程序绑定到取消"按钮.这意味着可能有成千上万的单击处理程序准备处理该单击事件.如果您单击该元素，它将执行内部函数的次数与绑定发生的次数相同.
You are actually binding a click handler to the cancel button each time the onProgress callback is fired. That means there may be potentially thousands of click handlers ready to handle that click event. If you clicked that element, it would execute the inner function as many times as that binding happened.
此外，您打算在用户单击取消按钮时呼叫cancelAll().好吧，这将取消所有上传，而不仅仅是相应的上传.
Also, you intend to call cancelAll() when the user has clicked the cancel button. Well, that would cancel all uploads, not just the corresponding upload.
看看这是怎么回事?用户可以单击该按钮，然后多次取消所有上传.那是行不通的.
See where this is going? A user might click that button, and cancel all the uploads many, many, many times. That's not going to do.
最后，(这是次要的)，不需要为您的回调定义noop函数(例如onSubmit，onUpload，onComplete等).
Lastly, (and this is minor) there is no need to define noop functions for your callbacks (e.g., onSubmit, onUpload, onComplete, ...).
我的第一个建议是仅使用FineUploader UI模式(非基本).它为您绘制UI(包括取消按钮).您可以根据需要对其进行更多自定义，方法是编辑一些模板上载程序使用的.
My first suggestion is just to use FineUploader UI mode (non-basic). It draws the UI (including a cancel button) for you. What you could do to customize it more (if you need) is to edit some of the templates that Fine Uploader uses.
另一个建议-这将需要您做更多的工作-继续使用FineUploader Core(基本)模式并以编程方式自己绘制UI.一种方法是编辑onComplete回调:
The other suggestion -- and this will require more work on your part -- is to continue using FineUploader Core (basic) mode and programmatically draw the UI yourself. One way to do this would be to edit the onComplete callback:
window.onload = function () {
var uploader = new qq.FineUploaderBasic({
debug: true,
element: document.getElementById('uploader'),
button: document.getElementById('button'),
request: {
endpoint: 'upload'
},
multiple: false,
maxConnections: 1,
callbacks: {
onSubmitted: function (id, name) {
var el = document.getElementById('uploader');
el.innerHTML = "<div id='file-"+id+"'>Cancel</div>";
var cancel_btn = document.getElementById('file-'+id);
var self = this;
qq(cancel_btn).attach('click', function () {
self.cancel(id);
})
}
}
});
}
onSubmitted回调处理程序是您最好的选择自定义UI会针对每个文件进行更改，因为它是
The onSubmitted callback handler is your best bet for making custom UI changes on a per-file basis because it is
在文件或Blob成功提交给上传者后调用
called when the file or Blob has been successfully submitted to the uploader
只需重申一下，我强烈建议您使用FineUploader UI(非基本)模式，因为它可以为您省去很多麻烦.如果您可以全力以赴，并且对Web和浏览器标准有很好的了解，那么请全力以赴使用Core(基本)模式.
Just to reiterate, I strongly recommend you use FineUploader UI (non-basic) mode as it will save you a lot of hassle starting off. If you are ok with putting the extra effort in, and you have a good understanding of web and browser standards then go all out for Core (basic) mode.
祝你好运，如果您还有其他问题，请告诉我.
Good luck and let me know if you have any more questions.
这篇关于FineUploader基本调用cancelAll()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
