聊一聊jQuery插件uploadify使用方法

2020-05-29 07:26:28易采站长站整理

}
}

下面是我的uploadify的配置 


/*
依赖于jQuery和$.dialog
opts = {
fileObjName:'idCardPositive',
swf: 'uploadify/uploadify.swf',
showProgress: function(progress){},//progress:0-1
checkFile: function(file){},
normalOnSelect: function(){},
normalUploaded: function(id,data),
positionClass: 'file-btn-left',
}
*/
function init(opts){
var maxSize = 5242880;//1024 * 1024 * 5,5M
$('#' + opts.fileObjName).uploadify({
'fileSizeLimit ': maxSize,
'multi': false,//每次只能选择一个文件
'auto': true,/*如果是自动上传,那上传按钮将没用了*/
'fileTypeExts': '*.jpg;*.bmp;*.jpeg;*.png',
'fileTypeDesc': '请选择图像或者视频',
'queueID': 'fileQueue',
'width': 200,
'height': 140,
'buttonText': '',
'fileObjName': opts.fileObjName,//需要修改文件名称
'swf': opts.swf,
'uploader': '/pcapi/user/uploadUserChangeCardImage.htm',
'onSelect' : function(file) {
//有name表示是swf格式文件上传,html5文件上传参数请参考http://www.uploadify.com/documentation/uploadifive/onselect-2/
//需要检测文件类型和大小
if(opts.checkFile(file)){
opts.normalOnSelect(opts.positionClass);
}else{
//swf上传需要在onUploadError处理这个失败
$('#' + opts.fileObjName).uploadify('cancel');
}
},
'onUploadProgress': function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
opts.showProgress(bytesUploaded/bytesTotal);
},
'onUploadError': function(file, errorCode, errorMsg, errorString) {
if(errorCode != -280){//取消上传的错误码是-280
$.dialog.error('上传失败,请重试',{txtYes: '我知道了'});
}
},
'onUploadSuccess': function(file, data) {
opts.normalUploaded(opts.fileObjName,data);
}
});
}

在配置uploadiFive的时候遇到一个问题:

1.fileTypeExts设置为“*.jpg;*.bmp;*.jpeg;*.png”,但实际上所有的图片格式都可以选择。所以只能在选择图片后自己手动检测格式。而且由于onSelect的参数queue没有文件类型信息:点击查看。所以只能在onAddQueueItem事件中检测,然后在onSelect中取消上传队列queue来取消文件的自动上传 


'onAddQueueItem': function(file) {//html5需要自己检测格式和大小
fileCheckResult = opts.checkFile(file);
},
'onSelect' : function(queue) {
if(fileCheckResult){
opts.normalOnSelect(opts.positionClass);
}else{
$('#' + opts.fileObjName).uploadifive('clearQueue');
}
},

可能还有一个问题是需要配置’fileType’: ‘image/*’,因为我直接设置了,不知道不设置会不会有问题,没试