相信有不少同学用过uploadify这一款文件上传插件,它支持多文件选择、能显示进度条、可配置性高,总体来说是比较好用的。官网有两个版本供下载,分别是flash版和HTML5版。不过令人惋惜的是,HTML5版是收费的。活了这么多年,啥时候用软件掏过钱啊!秉着发扬我们的优良传统,我决定照着它的API自己实现一个HTML5版的。

  经过一番折腾,终于覆盖了大部分API,已经能够实现基本的文件上传需求。如下,是插件中的default配置:

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,如:

<div id="upload"></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官网http://www.uploadify.com/documentation/查看,因为我完全是照着他的API实现的,用法与他一致。下面上个截图:

完整代码包

  为方便大家测试,我编写了一个完整的demo,需要运行在PHP环境中,如果你是其他后台语言,就自己写一下吧,很简单~

  猛戳这里下载:http://files.cnblogs.com/lvdabao/Huploadify.zip

  如果发现bug或其他建议,可以和我联系哦~

免费的HTML5版uploadify送上的更多相关文章

  1. 免费的HTML5版uploadify

    转http://www.cnblogs.com/lvdabao/p/3452858.html var defaults = { fileTypeExts:'',//允许上传的文件类型,格式'*.jpg ...

  2. jquery.uploadify上传插件HTML5版中文api使用说明

    插件官网文档:http://www.uploadify.com/documentation/ H5版下载地址:https://download.csdn.net/download/u010075697 ...

  3. 感谢各位亲们的大力支持,免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了!

    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...

  4. HTML5版的String Avoider小游戏

    HTML5版的String Avoider小游戏 http://www.newgrounds.com/portal/view/300760 蛮简单也蛮考验耐心,从游戏起始点移动鼠标到终点位置,鼠标移动 ...

  5. HTML5服务器端推送事件 解决PHP微信墙推送问题

    问题描述 以前的文章中<PHP微信墙制作,开源>已经用PHP搭建了一个微信墙获取信息的服务器,然后我就在想推送技术应该怎么解决,上一篇已经用了.NET 的signalr做了一个微信墙,PH ...

  6. SSE技术详解:一种全新的HTML5服务器推送事件技术

    前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...

  7. Nodejs express、html5实现拖拽上传

    一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs ...

  8. HTML5服务器推送消息的各种解决办法,html5服务器

    HTML5服务器推送消息的各种解决办法,html5服务器 摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在 ...

  9. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

随机推荐

  1. 转载 - Vultr VPS注册开通且一键快速安装PPTP VPN和电脑连接使用

    本文转载来自:https://www.vultrclub.com/139.html 从2014年Vultr VPS进入市场之后,作为有背景.实力的搅局者,是的最近两年VPS.服务器的用户成本降低.配置 ...

  2. ngnix 502 bad gateway 的解决办法之空间满了

    网站一直运行都很正常,但某天登录后台却出现502 bad gateway,上网搜索都是一大堆解决办法,没可操作性.网站难道出现安全问题?这个应该很少概率.最后排查发现空间满了. 使用命令:df -hl ...

  3. css+js定位到屏幕中间

    ex:让一个div始终显示在屏幕中间 一. css:#idName{position: absolute;z-index: 999;width: ?px;margin-top: ?px;}//此处的初 ...

  4. ASP.NET操作ORACLE数据库之模糊查询

    ASP.NET操作ORACLE数据库之模糊查询 一.ASP.NET MVC利用OracleHelper辅助类操作ORACLE数据库 //连接Oracle数据库的连接字符串 string connect ...

  5. 分组背包——sicily 1750

    1750. 运动会 限制条件 时间限制: 1 秒, 内存限制: 32 兆 题目描述 ZEH是一名04级的学生,他除了绩点高,还有运动细胞.有一次学院举办运动会,ZEH发现里面的 项目都是他所向披靡的, ...

  6. Unity加载模块深度解析(网格篇)

    在上一篇 加载模块深度解析(一)中,我们重点讨论了纹理资源的加载性能.这次,我们再来为你揭开其他主流资源的加载效率. 这是侑虎科技第53篇原创文章,欢迎转发分享,未经作者授权请勿转载.同时如果您有任何 ...

  7. 发现的eval的一个小问题

    首先我们来看五段代码: 第一段代码: function test(){ eval('var a = 1;'); alert(a); } test(); 第二段代码: function test(){ ...

  8. PHP 定界符使用

    在PHP代码中,如果不想一行一行的拼接HTML或者JS的话,那么使用定界符将是最好的帮手! 使用方法: <<<eof .......html/js..... eof; 注意事项:(别 ...

  9. linux split 命令 将一个大的文件拆分成若干小文件

    . 以行数拆分 -l 参数: 原始文件 拆分后文件名前缀 例:以50行对文件进行拆分 big.txt small_ 拆分后会生成 small_aa small_ab small_ac ... . 以大 ...

  10. Webservice 65535 错误

    修改配置项: <system.serviceModel> <behaviors> <endpointBehaviors> <behavior name=&qu ...