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

<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实现的,用法与他一致。下面上个截图:

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

  1. 免费的HTML5版uploadify送上

    相信有不少同学用过uploadify这一款文件上传插件,它支持多文件选择.能显示进度条.可配置性高,总体来说是比较好用的.官网有两个版本供下载,分别是flash版和HTML5版.不过令人惋惜的是,HT ...

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

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

  3. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

  4. HTML5版的String Avoider小游戏

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

  5. jmgraph前端画图组件(html5版)

    原文:jmgraph前端画图组件(html5版)      jmgraph是一个基于html5的WEB前端画图组件.        前端画图对象控件化,支持鼠标和健盘事件响应,可对单个控件样式设定,支 ...

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

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

  7. js操作文件 HTML5版

    js操作文件 HTML5版,有需要的朋友可以参考下. <!DOCTYPE html> <html> <head> <title>JSFileReader ...

  8. 开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了!

    青瓷引擎的成长 青瓷引擎自2015年4月项目启动开始,7月首次亮相2015年ChinaJoy,便得到业界的极大关注,随后开启限量测试,收到数百个开发者团队的试用申请及反馈,期间经历了18个内测版本,完 ...

  9. 多文件上传插件Stream,是Uploadify的Flash版和Html5版的结合,带进度条,并支持html5断点续传(附件上传),拖拽等功能

    是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux, Mac, Android, iOS)下,主流浏览器(IE7+, Chrome, Firefox, Safari, 其他) ...

随机推荐

  1. Java&Selenium 模拟键盘方法封装

    Java&Selenium 模拟键盘方法封装 package util; import java.awt.AWTException; import java.awt.Robot; import ...

  2. 如何DIY个性PE

    前言:有时候在网络上能找到很不错的PE(无忧启动论坛),但是有时候PE的功能仍不能满足自己的需要(软件过旧,缺少某些功能),这时候就显得自己DIYPE的重要性 需要的工具: WIMTOOL(必备) 软 ...

  3. Redis键值设计(转载)

    参考资料:https://blog.csdn.net/iloveyin/article/details/7105181 丰富的数据结构使得redis的设计非常的有趣.不像关系型数据库那样,DEV和DB ...

  4. Codeforces Round #584 B. Koala and Lights

    链接: https://codeforces.com/contest/1209/problem/B 题意: It is a holiday season, and Koala is decoratin ...

  5. javascript逻辑非(!/!!)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Group by,并汇总求和

    static void Main(string[] args) { bbb(); Console.ReadKey(); } public static List<Dto> toAdd() ...

  7. Java中通过Array.sort()对数组从大到小排序

    package com.itheimajavase; import java.util.Arrays; import java.util.Comparator; public class Day01 ...

  8. Codeforces Round #350 (Div. 2) A B C D1 D2 水题【D2 【二分+枚举】好题】

    A. Holidays 题意:一个星球 五天工作,两天休息.给你一个1e6的数字n,问你最少和最多休息几天.思路:我居然写成模拟题QAQ. #include<bits/stdc++.h> ...

  9. 049_指定目录路径,脚本自动将该目录使用 tar 命令打包备份到/data 目录

    #!/bin/bash[ ! -d /data ] && mkdir /data  #确保有此目录[ -z $1 ] && exit   #为空不需要打包if [ -d ...

  10. ueditor批量上传word图片

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...