基于jQuery的HTML5文件上传插件Huploadify

Huploadify上传插件

项目里试过多款上传插件，最终我选择了uploadify。

uploadify的主要特性

• 多文件上传
• 显示进度条
• 显示已上传文件大小和百分比
• 文件后缀名和文件大小检测
• 向服务端提交额外数据
• 自定义文件队列中的html模板
• css样式分离出单独文件，可自己定制样式
• 添加文件上传各阶段的回调函数

uploadify的default配置参数信息

• fileTypeExts:'*.*',//允许上传的文件类型，格式'*.jpg;*.doc'
• uploader:'',//文件提交的地址
• auto:false,//是否开启自动上传
• method:'post',//发送请求的方式，get或post
• multi:true,//是否允许选择多个文件
• formData:null,//发送给服务端的参数，格式：{key1:value1,key2:value2}
• fileObjName:'file',//在后端接受文件的参数名称，如PHP中的$_FILES['file']
• fileSizeLimit:2048,//允许上传的文件大小，单位KB
• showUploadedPercent:true,//是否实时显示上传的百分比，如20%
• showUploadedSize:false,//是否实时显示已上传的文件大小，如1M/2M
• buttonText:'选择文件',//上传按钮上的文字
• removeTimeout: 1000,//上传完成后进度条的消失时间，单位毫秒
• itemTemplate:itemTemp,//上传队列显示的模板
• onUploadStart:null,//上传开始时的动作
• onUploadSuccess:null,//上传成功的动作
• onUploadComplete:null,//上传完成的动作
• onUploadError:null, //上传失败的动作
• onInit:null,//初始化时的动作
• onCancel:null//删除掉某个文件后的回调函数，可传入参数file
• onClearQueue:null,//清空上传队列后的回调函数，在调用cancel并传入参数*时触发
• onDestroy:null,//在调用destroy方法时触发
• onSelect:null,//选择文件后的回调函数，可传入参数file
• onQueueComplete:null//队列中的所有文件上传完成后触发

uploadify的使用方法

$('#upload').Huploadify({ 
    auto:true, 
    fileTypeExts:'*.jpg;*.png;*.exe', 
    multi:true, 
    formData:{key:123456,key2:'vvvv'}, 
    fileSizeLimit:1024, 
    showUploadedPercent:true, 
    showUploadedSize:true, 
    removeTimeout:9999999, 
    uploader:'upload.php', 
    onUploadStart:function(file){ 
        console.log(file.name+'开始上传'); 
    //此处可以更新上传插件uploader的api地址 
    this.uploader = 'upload_new.php'; 
    }, 
    onInit:function(obj){ 
        console.log('初始化'); 
        console.log(obj); 
    }, 
    onUploadComplete:function(file,jsonData){//jsonData:接口返回的数据 
    console.log(JSON.parse(jsonData)); 
        console.log(file.name+'上传完成'); 
    }, 
    onCancel:function(file){ 
        console.log(file.name+'删除成功'); 
    }, 
    onClearQueue:function(queueItemCount){ 
        console.log('有'+queueItemCount+'个文件***了'); 
    }, 
    onDestroy:function(){ 
        console.log('destroyed!'); 
    }, 
    onSelect:function(file){ 
        console.log(file.name+'加入上传队列'); 
    }, 
    onQueueComplete:function(queueData){ 
        console.log('队列中的文件全部上传完成',queueData); 
    } 
}); 

下载Huploadify上传插件 (提取密码：ui6a)

具体的API使用方式，请参考uploadify官网：http://www.uploadify.com/

 （说明：这款插件的作者完全仿照了Uploadify官网：http://www.uploadify.com/）

本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z