博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
免费的HTML5版uploadify
阅读量:4677 次
发布时间:2019-06-09

本文共 1767 字,大约阅读时间需要 5 分钟。

转http://www.cnblogs.com/lvdabao/p/3452858.html

var defaults = {        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    }

  已实现的特性有:

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

使用方式

  首先页面上需要一个容器,通常是一个div,如:

  然后直接调用即可:

$('#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(){            console.log('开始上传');            },        onInit:function(){            console.log('初始化');            },        onUploadComplete:function(){            console.log('上传完成');            },        onCancel:function(file){            console.log(file);        }    });

  具体的参数含义,如果看上面的不太清晰,可以直接去uploadify官网查看,因为我完全是照着他的API实现的,用法与他一致。下面上个截图:

转载于:https://www.cnblogs.com/yanghongfei/p/7661525.html

你可能感兴趣的文章
Git Day02,工作区,暂存区,回退,删除文件
查看>>
Windows Phone 7 Coding4Fun控件简介
查看>>
Nginx 常用命令总结
查看>>
hall wrong behavior
查看>>
Markdown test
查看>>
Collection集合
查看>>
【C++】const在不同位置修饰指针变量
查看>>
github新项目挂历模式
查看>>
编写jquery插件
查看>>
敏捷开发笔记
查看>>
css实现背景图片模糊
查看>>
学前班
查看>>
手把手教您扩展虚拟内存
查看>>
android-samples-mvp
查看>>
oracle 11g r2安装
查看>>
关于自关联1
查看>>
存储控制器、MMU、flash控制器介绍
查看>>
hdu-1814(2-sat)
查看>>
自我反省
查看>>
反射,得到Type引用的三种方式
查看>>