HTML文件中
需要添加的标签<input type="file" name="file_upload" id="file_upload" />
引入的两个文件js和css
jquery.uploadifive.js,uploadifive.css
在js中例子：
$(function() {
pages.creatGrid();
loadType();
$('#file_upload').uploadifive({
'queueID' : 'fileQueue',
'auto': false, //是否自动上传，默认true
'multi': false,
'dnd': false, //拖放
'uploadScript': 'XXXXX’, // 服务器处理地址
'cancelImg': '../../images/cancel.png',
"fileObjName":"file",
'removeCompleted':true,
'buttonText': "请选择文件", //按钮文字
'height': 30, //按钮高度
'width': 120, //按钮宽度
'fileSizeLimit': "2GB", //上传文件的大小限制 0则表示无限制
'uploadLimit': 0, //上传文件数，这里一定要设置0，否则无法进行第二次添加文件上传
'queueSizeLimit':1, //一次可以在队列中拥有的最大文件数
'fileType': '*/*', //文件类型(mime类型,可以去网上查，相应的文件格式设置，例如传word类型 ‘application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document’)，要允许所有文件，请将此值设置为false，多个类型使用数组形式['image/jpeg','video/mp4']
'overrideEvents': ['onDialogClose', 'onError'], //onDialogClose 取消自带的错误提示
'onAddQueueItem': function (file) {
//增加文件队列
},
'onCancel' : function(file) {
},
'onError': function (errorType, file) {
if (file != 0) {
var settings = $('#file_upload').data('uploadifive').settings;
switch (errorType) {
case 'UPLOAD_LIMIT_EXCEEDED':
layer_Msg("上传的文件数量已经超出系统限制的" + settings.queueSizeLimit + "个文件！");
break;
case 'FILE_SIZE_LIMIT_EXCEEDED':
layer_Msg("文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadifive('settings', 'fileSizeLimit') + "大小！");
break;
case 'QUEUE_LIMIT_EXCEEDED':
layer_Msg("任务数量超出队列限制");
break;
case 'FORBIDDEN_FILE_TYPE':
layer_Msg("文件 [" + file.name + "] 类型不正确！");
break;
case '404_FILE_NOT_FOUND':
layer_Msg("文件未上传成功或服务器存放文件的文件夹不存在");
break;
}
}
},
'onUploadFile': function (file,formData) {
console.log("---onUploadFile");
//需要上传的文件信息,这里的formData是传后台的打包数据，可以把你想传到后台的参数添加进去，例如：formData.append("参数名"，变量)
},
'onUploadComplete': function (file, data) { //对于完成的每个文件上载，触发一次。
console.log("---onUploadComplete");
try{//上传成功后返回的字段处理，data是后台上传后返回的json格式数据，可以提取相应的信息
console.log('上传成功~~');
}else{
$.messager.alert("错误信息","上传失败","error");
}
}catch(e){
$.messager.alert("错误信息","上传失败","error");
console.log(e);
}
}
});
$('#file_upload').uploadifive('clearQueue'); 用于上传完成后清理缓存
$('#file_upload').uploadifive('upload'); 触发上传事件