心情杂记

>开发的时候，经常要使用到各种插件，这里做一个整理，方便查询和使用

uploadify这款优秀的图片上传工具，相信大家都用过，可惜，官方免费版的是flash的，现在已经是html5的时代了，flash已经逐渐被淘汰。

这里分享一个基于html5的Huploadify，API和uploadify几乎一致，并且功能也不亚与它！

###使用方法：
#####已实现常用的API，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//队列中的所有文件上传完成后触发

首先页面上需要一个容器，通常是一个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);
　　}
});
```

看起来很简单吧？简单需求的图片上传，并且需要开发速度完成功能的，我一直使用的这个插件，用起来超爽，强烈推荐！

后续文章会推出一些复杂需求的图片处理demo，比如：图片上传剪裁，加水印等等。

最后贴出我个人整理的详细Huploadify的demo供大家下载查看。