一款优秀的上传插件，Uploadify的html5版本------uploadifive使用攻略

插件简介：

一款优秀的上传插件，Uploadify的html5版本

官网地址：

http://www.uploadify.com

Demo包下载地址：（包含插件及前后端代码）

https://download.csdn.net/download/qq_36036735/11635505

1，可配置项概要：


2，实战配置：

$('#file_upload').uploadifive({
    //传输设置-------------------------------------------------------
    'uploadScript': '/Home/Upload',//定义服务器访问路径  （待改为webapi： /api/upload/file） 
    'fileObjName': 'fileData',//定义服务器接收参数名称
    'method': 'post',//上传文件的提交方法，取值'post'或'get'
    //'formData': { "imgType": "normal" }, //提交给服务器端的参数
    //'checkScript': '/Home/Check',//检查目标文件夹中是否存在与上载文件同名的文件
    'auto': false,//是否自动上传
    'multi': true,//是否允许多文件上传
    
    //样式-----------------------------------------------------------
    'width': 120,//上传按钮的宽度（单位：像素）
    'height': 30,//上传按钮的高度（单位：像素）
    'buttonText': '请选择文件',//定义上传按钮显示的文字
    'buttonClass': false,//要添加按钮的样式
    'dnd': true, //是否允许拖放
    'removeCompleted': false,//文件上传完毕后，是否从上传队列中移除
    'queueID': false,//指定用于显示上传队列的父级元素id
    'dropTarget': false,// Selector for the drop target
    //显示其它上传队列样式
    //'itemTemplate': '<div class="uploadifive-queue-item">\
    //        <a class="close" href="#">X</a>\
    //        <div><span class="filename"></span><span class="fileinfo"></span></div>\
    //        <div class="progress">\
    //            <div class="progress-bar"></div>\
    //        </div>\
    //    </div>',

    //文件约束--------------------------------------------------------------
    'fileType': 'image/jpeg', //允许上传的文件类型。要允许所有设置为false，允许特定设置为['image/jpeg','video/*']
    'truncateLength': 0,//指定文件名称的截取长度，设置该值后，文件名称超过该长度将会被截取
    'fileSizeLimit': "200MB",//上传文件的大小限制 0则表示无限制
    'uploadLimit': 10,//指定允许上传的最大文件数量
    'simUploadLimit': 0, //一次可上传的文件数量
    'queueSizeLimit': 10,// 指定上传队列中一次可容纳的最大文件数量（定义上传队列约束）
    //'overrideEvents': [ 'onError'],//可指定多个插件默认事件中的事件名称，被指定的事件将不会执行
    
    //事件监听-----------------------------------------------------------
    //在uploadifive初始化结束时触发该事件
    'onInit': function () {},
    //验证客户端浏览器兼容
    'onFallback': function () { 
        alert('浏览器不支持HTML5,无法上传！');
    },
    //验证客户端文件是否已存在
    'onCheck': function (file, exists) {
        if (!exists) {
            alert('文件名：'+ file.name + ' 不存在');
        }
    },
    //验证客户端设定的约束
    'onError': function (errorType, file) {
        if (file != 0) {
            $("#file_upload").uploadifive("debug"); //在控制台输出调试信息
            var settings = $('#file_upload').data('uploadifive').settings;
            switch (errorType) {
                case 'UPLOAD_LIMIT_EXCEEDED':
                    alert("上传的文件数量已经超出系统限制的" + settings.queueSizeLimit + "个文件！");
                    break;
                case 'FILE_SIZE_LIMIT_EXCEEDED':
                    alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadifive('settings', 'fileSizeLimit') + "大小！");
                    break;
                case 'QUEUE_LIMIT_EXCEEDED':
                    alert("任务数量超出队列限制");
                    break;
                case 'FORBIDDEN_FILE_TYPE':
                    alert("文件 [" + file.name + "] 类型不正确！");
                    break;
                case '404_FILE_NOT_FOUND':
                    alert("文件未上传成功或服务器存放文件的文件夹不存在");
                    break;
            }
        }
    },
    //在每添加一个文件至上传队列时触发该事件
    'onSelect': function (queue) {
        console.log("被取消的文件数量：" + queue.cancelled);
        console.log("上传队列中的文件总数量：" + queue.count);
        console.log("上传错误的文件数量：" + queue.errors);
        console.log("被添加到上传队列中的文件数量：" + queue.queued);
        console.log("被替换的文件数量：" + queue.replaced);
        console.log("所选择的文件数量：" + queue.selected);
    },
    //当文件被放到该队列文件时触发该事件
    'onDrop': function (file, fileDropCount) {

    },
    //上传进度更新时触发该事件
    'onProgress': function (file, e) {
        //if (e.lengthComputable) {//当文件上传长度可计算时
        //    var percent = Math.round((e.loaded / e.total) * 100);//loaded:加载的btyes数 / total:要加载的总字节数
        //}
        //file.queueItem.find('.fileinfo').html(' - ' + percent + '%');
        //file.queueItem.find('.progress-bar').css('width', percent + '%');
    },
    //在文件被添加到上传队列时触发
    'onAddQueueItem':function(file) {
        console.log('Test:' + file.type );
    },
    //在执行上传操作时触发（filesToUpload 需要上传的文件数）
    'onUpload': function (filesToUpload) { 
        if (filesToUpload < 1) {
            alert("未选择任何文件");
            return false;
        }
    },
    //在上传每一个文件时触发（file:正在上载的文件对象）
    'onUploadFile': function (file) {},
    //在文件上传完成后触发
    'onUploadComplete': function (file, data) {
        if (data) {
            try {
                data = JSON.parse(data);
                if (data.result === true) {
                    alert(file.name+"上传成功");
                } else {
                    alert(data.msg);
                }
            } catch (e) {
                alert(data);
            }
        }
    },
    //队列中的所有文件被处理完成时触发该事件
    'onQueueComplete': function (uploads) {
        console.log("上传成功总文件数：" + uploads.successful);
        console.log("上传失败总文件数：" + uploads.errors);
        console.log("上传总文件数：" + uploads.count);
        console.log("尝试的文件上载次数：" + uploads.attempts);
    },
   //在上传被取消时触发
    'onCancel': function (file) {
        console.log('Test:' + file.name );
    },
    //在清空队列时触发
    'onClearQueue': function (queue) {
        queue.css('border', '');
    },
    //在uploadifive销毁时触发该事件
    'onDestroy': function () {}
});

阅后请帮忙点个赞，谢谢，您的赞将成为我继续分享的动力！！！
阅后请帮忙点个赞，谢谢，您的赞将成为我继续分享的动力！！！
阅后请帮忙点个赞，谢谢，您的赞将成为我继续分享的动力！！！