1

我正在使用 Valum 的 Ajax 文件上传器。为此，我有以下 div：

<div id="fileuploadDiv" class="upload upload-mobile"></div>

我在javascript上初始化了上传器，如下所示：

 var uploader = new qq.FileUploader({    
element: document.getElementById('fileuploadDiv'),    
                template: '<div class="qq-uploader" style="right:30%;">' +
                    /* to remove drag and drop, but generates small js error,which doesnt effect BTW*/
                '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +

                    '<div class="qq-upload-button"><span id="upload-btn-text">From  </br> Computer</span></div>' +
                    '<ul class="qq-upload-list"></ul>' +
                    '</div>',

                // validation    
                // ex. ['jpg', 'jpeg', 'png', 'gif'] or []
                allowedExtensions: ['jpg','jpeg','png'],        
                // each file size limit in bytes
                // this option isn't supported in all browsers
                sizeLimit: 10485760, // max size   
                //minSizeLimit: 0, // min size
                abortOnFailure: true, // Fail all files if one doesn't meet the criteria

                multiple: false,
                action: baseurl+'/upload.php?device=mobile',
                onUpload: function(id, fileName) {
                    //remove the instacode if exists
                    window.location.hash = '';
                    $.mobile.loading( 'show', {
                        text: 'Uploading image...',
                        textVisible: true,
                        theme: 'b',
                        html: ""
                    });
                    $('.qq-upload-list').remove();
                    window.location.hash = '';
                    $('.ui-loader h1').html('<div id="progressbar"><div class="progress-label">Uploading...</div></div>');

                },

                onProgress: function(id, fileName, loaded, total){
                    var progress = Math.round((loaded / total) * 100);
                    progressBar(progress);
                },

                onComplete: function(id,fileName,responseJSON) {
                    if(responseJSON.status=='Success'){
                        $.mobile.loading('hide');
                        changePicture(baseurl+'/' + responseJSON.message);
                    }else{
                         $.mobile.loading('hide');

                    }

                }
            });

        });

以下是我在 fileuploader.js 中的 qq.fileUploader 函数：

qq.FileUploader = function(o){
    // call parent constructor
    qq.FileUploaderBasic.apply(this, arguments);

    // additional options
    qq.extend(this._options, {
        element: null,
        // if set, will be used instead of qq-upload-list in template
        listElement: null,
        dragText: 'Drop files here to upload',
        extraDropzones : [],
        uploadButtonText: 'Upload a file',
        cancelButtonText: 'Cancel',
        failUploadText: 'Upload failed',

        multipleFileDropNotAllowedMessage: "You may only drop one file",

        template: '<div class="qq-uploader">' +
            '<div class="qq-upload-drop-area"><span>{dragText}</span></div>' +
            '<div class="qq-upload-button">My<br/>Computer</div>' +
            '<ul class="qq-upload-list"></ul>' +
            '</div>',

        // template for one item in file list
        fileTemplate: '<li>' +
            '<span class="qq-progress-bar"></span>' +
            '<span class="qq-upload-spinner"></span>' +
            '<span class="qq-upload-finished"></span>' +
            '<span class="qq-upload-file"></span>' +
            '<span class="qq-upload-size"></span>' +
            '<a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
            '<span class="qq-upload-failed-text">{failUploadtext}</span>' +
            '</li>',

        classes: {
            // used to get elements from templates
            button: 'qq-upload-button',
            drop: 'qq-upload-drop-area',
            dropActive: 'qq-upload-drop-area-active',
            dropDisabled: 'qq-upload-drop-area-disabled',
            list: 'qq-upload-list',
            progressBar: 'qq-progress-bar',
            file: 'qq-upload-file',
            spinner: 'qq-upload-spinner',
            finished: 'qq-upload-finished',
            size: 'qq-upload-size',
            cancel: 'qq-upload-cancel',

            // added to list item <li> when upload completes
            // used in css to hide progress spinner
            success: 'qq-upload-success',
            fail: 'qq-upload-fail',

            successIcon: null,
            failIcon: null
        }
    });

现在发生的情况是 qq-upload-button 没有加载到低质量的手机或缓慢的互联网连接上。有消息“请稍等”。可能是因为 DOM 没有完全加载还是我做错了什么。如果花费的时间超过一分钟，如何取消此操作？

4

0 回答 0