聊一聊jQuery插件uploadify使用方法

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

下面是我的uploadiFive配置 


/*
依赖于jQuery和$.dialog
opts = {
fileObjName:'idCardPositive',//name和id相同
showProgress: function(progress){},//progress:0-1
checkFile: function(file){},
normalOnSelect: function(positionClass){},
normalUploaded: function(id,data),
positionClass: 'file-btn-left',
}
*/
function init(opts){
var fileCheckResult = true;
var maxSize = 5242880;//1024 * 1024 * 5,5M
$('#' + opts.fileObjName).uploadifive({
'fileSizeLimit ': maxSize,
'multi': false,//每次只能选择一个文件
'auto': true,/*如果是自动上传,那上传按钮将没用了*/
'fileTypeExts': '*.jpg;*.bmp;*.jpeg;*.png',
'fileTypeDesc': '请选择图像或者视频',
'queueID': 'fileQueue',
'width': 200,
'height': 140,
'buttonText': '',
'fileObjName': opts.fileObjName,//需要修改文件名称
'dnd': false,//不允许拖拽
'fileType': 'image/*',
'uploadScript': '/pcapi/user/uploadUserChangeCardImage.htm',
'onAddQueueItem': function(file) {//html5需要自己检测格式和大小
fileCheckResult = opts.checkFile(file);
},
'onSelect' : function(queue) {
if(fileCheckResult){
opts.normalOnSelect(opts.positionClass);
}else{
$('#' + opts.fileObjName).uploadifive('clearQueue');
}
},
'onProgress': function(file, e) {
opts.showProgress(e.loaded / e.total);
},
'onError': function(file, errorCode, errorMsg, errorString) {
$.dialog.error('上传失败,请重试',{txtYes: '我知道了'});
},
'onUploadComplete': function(file, data) {
opts.normalUploaded(opts.fileObjName,data);
}
});
}

 

2.当头棒喝
本地测试OK以后,放到测试环境上去测试,马上被震惊了。
遇到的第一个问题就是在IE下很多时候点击没有反应(没有弹出文件选择框),找了半天原因终于找到了:必须在文档准备完全的时候再去初始化uploadify,而且确保上传input是可用的(非display:none)
好了,可以选择文件了,但是选择文件以后IE8/9总是抛出call to startUpload failed异常,去网上查了一下,主要有几个原因

1).而是可能有多个上传的div或者input(含有相同的name或者ID)导致的,如果有两个不同的上传按钮,那么他们的name,id要设置得不一样。

这个不是什么tab的问题,而是可能有多个上传的div或者input(含有相同的name或者ID)导致的
如果有两个不同的上传按钮,那么他们的name,id要设置得不一样。 


<div id='total'>
<input type="file" name="total_upload" id="total_upload" multiple="true" />
</div>
<a href="javascript:$('#total_upload').uploadify('upload', '*')">开始上传</a>