我正在使用FineUploaderBasic将上传集成到我现有的网站。我遇到的问题是取消当前的上传文件。这是我的代码：
<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控制台会出现此错误：
ReferenceError: cancelAll is not defined
我在官方文档中找不到任何关于调用cancelAll（）的说明。
我怎么称呼它？什么是正确的实施？
修改 这是我的工作代码：
<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。
答案 0 :(得分：0)
您将获得ReferenceError，因为cancelAll不在内部范围内
onProgress处理程序，但不要担心，因为......
在上传过程中调用，随着它的进展。
通过这样做，
onProgress: function (id, fileName, loaded, total) {
$('#cancelling').click(function () {
// ...
});
每次触发onProgress回调时，你实际上是绑定点击处理程序到取消按钮。这意味着可能有数千个点击处理程序准备好处理该点击事件。如果单击该元素，它将执行内部函数的次数与绑定发生的次数相同。
此外，您打算在用户点击取消按钮时致电cancelAll()。好吧，这将取消所有上传，而不仅仅是相应的上传。
看看这是怎么回事？用户可能会点击该按钮，并取消全部上传很多次。那不可能。
最后，（这是次要的）没有必要为你的回调定义noop函数（例如，onSubmit，onUpload，onComplete，...）。
我的第一个建议是使用FineUploader UI模式（非基本）。它为您绘制UI（包括取消按钮）。你可以做些什么来定制它（如果你需要的话）是编辑Fine Uploader使用的一些templates。
另一个建议 - 这将需要您做更多的工作 - 继续使用FineUploader Core（基本）模式并以编程方式自己绘制UI。一种方法是编辑onComplete回调：
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);
})
}
}
});
}
The onSubmitted callback handler是您根据每个文件进行自定义UI更改的最佳选择，因为它是
在文件或Blob成功提交到上传者时调用
重申一下，我强烈建议你使用FineUploader UI（非基本）模式，因为它会为你节省很多麻烦。如果您可以付出额外的努力，并且您对Web和浏览器标准有了很好的理解，那么请全力以赴进行Core（基本）模式。
祝你好运，如果您有任何疑问，请告诉我。