Question

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

Answer 1

cancelAll is documented here.

您将获得ReferenceError，因为cancelAll不在内部范围内 onProgress处理程序，但不要担心，因为......

Note that onProgress is:

在上传过程中调用，随着它的进展。

通过这样做，

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（基本）模式。

祝你好运，如果您有任何疑问，请告诉我。

FineUploaderBasic调用cancelAll（）

1 个答案: