Javascript FineUploaderBasic调用cancelAll（）

我正在使用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>

我在官方文档中找不到有关调用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>

Загрузить файл
window.onload=函数（）
{
var uploader=new qq.FineUploaderBasic
({
元素：document.getElementById（'uploader'），
按钮：document.getElementById（'button'），
请求：
{
端点：“上载”
},
多重：假，
maxConnections:1，
验证：
{
允许的扩展：['jpeg'、'jpg'、'gif'、'png'、'jpe'，
‘mp3’、‘wma’、‘wav’，
‘mp4’、‘flv’、‘3gpp’、‘webm’，
'zip'，rar'，gz'，tar'，tgz']，
sizeLimit:20971520//20MB=20*1024*1024字节
},
信息：
{
sizeError:'错误：{sizeLimit}'，
typeError:“{file}错误。有效：{extensions}。”
},
回调：
{
OnSubmited:函数（id、文件名）
{
$（“#取消链接”）.show（）；
$（“#按钮”）.hide（）；
$（“#进度”）.show（）；
$（'#progress'）.html（'已提交…'）；
var cancel_btn=document.getElementById（'cancel_link'）；
var self=这个；
qq（取消）。附加（'点击'，功能（）{
自动取消（id）；
});
},
onProgress:函数（id、文件名、已加载、总计）
{
如果（加载

您得到的是
ReferenceError
，因为
cancelAll
不在内部主体的范围内
onProgress处理程序的一部分，但暂时不要担心，因为


在上载过程中，随着上载的进行调用

这样做,

onProgress: function (id, fileName, loaded, total) {
    $('#cancelling').click(function () {
        // ...
    }); 

实际上，每次启动onProgress回调时，您都在将一个单击处理程序绑定到cancel按钮。这意味着可能有数千个单击处理程序准备好处理该单击事件。如果您单击该元素，它将执行与绑定次数相同的内部函数

另外，当用户单击“取消”按钮时，您打算调用
cancelAll（）
。这将取消all上传，而不仅仅是相应的上传

看到这是怎么回事了吗？用户可能会单击该按钮，然后多次取消上载。这是行不通的

最后，（这是次要的）无需为回调定义noop函数（例如onSubmit、onUpload、onComplete等）

我的第一个建议是只使用FineUploader UI模式（非基本）。它为您绘制UI（包括取消按钮）。若您需要，您可以对其进行更多自定义，即编辑FineUploader使用的一些界面

另一个建议——这需要您做更多的工作——是继续使用FineUploader Core（basic）模式，并自己以编程方式绘制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);
                })
            }
        }
    });
}    

window.onload=函数（）{
var uploader=new qq.FineUploaderBasic({
是的，
元素：document.getElementById（'uploader'），
按钮：document.getElementById（'button'），
请求：{
端点：“上载”
},    
多重：假，
maxConnections:1，
回调：{
OnSubmited:函数（id、名称）{
var el=document.getElementById（'uploader'）；
el.innerHTML=“取消”；
var cancel_btn=document.getElementById（'file-'+id）；
var self=这个；
qq（取消）。附加（'点击'，功能（）{
自动取消（id）；
})
}
}
});
}    

是对每个文件进行自定义UI更改的最佳选择，因为它是

当文件或Blob已成功提交到上载程序时调用

只是重申一下，我强烈建议您使用FineUploader UI（非基本）模式，因为这将为您节省很多起步时的麻烦。如果您愿意投入额外的精力，并且您对web和浏览器标准有很好的了解，那么请全力使用核心（基本）模式

祝你好运，如果你还有任何问题，请告诉我。
@mfeltner我这次更新了代码，它在Firefox上运行。但在Android上不会显示进展。有什么问题吗？进展在Firefox上运行吗？@mfeltner是的does@mfeltner我在这里问了这个问题@user2622614进度报告在和的版本上可能不受支持您正在使用的roid。这是Android的一个限制，不是很好的上传程序。
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);
                })
            }
        }
    });
}