我正在使用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没有满载或者我做错了什么。如果花费的时间超过一分钟,如何取消此操作?