java 上传H5 uploadifive组件

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');   触发上传事件