0

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

4

1 回答 1

0

cancelAll记录在这里。

你得到的ReferenceError原因cancelAll不在 onProgress 处理程序的内部范围内，但暂时不要担心，因为......

请注意onProgress：

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

通过做这个，

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

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

此外，您打算cancelAll()在用户单击取消按钮时调用。好吧，这将取消所有上传，而不仅仅是相应的上传。

看看这是怎么回事？用户可能会单击该按钮，并多次取消所有上传。那是不行的。

最后，（这是次要的）没有必要为您的回调定义 noop 函数（例如，onSubmit、onUpload、onComplete 等）。

我的第一个建议就是使用 FineUploader UI 模式（非基本）。它为您绘制 UI（包括取消按钮）。您可以做的更多自定义（如果需要）是编辑 Fine Uploader 使用的一些模板。

另一个建议——这需要你做更多的工作——是继续使用 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);
                })
            }
        }
    });
}

onSubmitted回调处理程序是基于每个文件进行自定义 UI 更改的最佳选择，因为它是

当文件或 Blob 已成功提交给上传者时调用

重申一下，我强烈建议您使用 FineUploader UI（非基本）模式，因为它会为您节省很多开始时的麻烦。如果您愿意付出额外的努力，并且您对 Web 和浏览器标准有很好的了解，那么就全力以赴地使用核心（基本）模式。

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

于 2013-07-26T16:01:22.223 回答