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

uploadify上传插件有两个版本:flash版、HTML5+jQuery版。有丰富的API。

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的使用方法

  1. <div id="upload"></div>  
  1. $('#upload').Huploadify({ 
  2.     auto:true
  3.     fileTypeExts:'*.jpg;*.png;*.exe'
  4.     multi:true
  5.     formData:{key:123456,key2:'vvvv'}, 
  6.     fileSizeLimit:1024, 
  7.     showUploadedPercent:true
  8.     showUploadedSize:true
  9.     removeTimeout:9999999, 
  10.     uploader:'upload.php'
  11.     onUploadStart:function(file){ 
  12.         console.log(file.name+'开始上传'); 
  13.     //此处可以更新上传插件uploader的api地址 
  14.     this.uploader = 'upload_new.php'
  15.     }, 
  16.     onInit:function(obj){ 
  17.         console.log('初始化'); 
  18.         console.log(obj); 
  19.     }, 
  20.     onUploadComplete:function(file,jsonData){//jsonData:接口返回的数据 
  21.     console.log(JSON.parse(jsonData)); 
  22.         console.log(file.name+'上传完成'); 
  23.     }, 
  24.     onCancel:function(file){ 
  25.         console.log(file.name+'删除成功'); 
  26.     }, 
  27.     onClearQueue:function(queueItemCount){ 
  28.         console.log('有'+queueItemCount+'个文件被删除了'); 
  29.     }, 
  30.     onDestroy:function(){ 
  31.         console.log('destroyed!'); 
  32.     }, 
  33.     onSelect:function(file){ 
  34.         console.log(file.name+'加入上传队列'); 
  35.     }, 
  36.     onQueueComplete:function(queueData){ 
  37.         console.log('队列中的文件全部上传完成',queueData); 
  38.     } 
  39. }); 

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

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

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

 

相关经验

导读书签
书签初始化中…