推荐Huploadify实现上传图片或文件

之前项目用uploadify(flash version)实现图片上传功能，依赖于flash的上传插件浏览器兼容性不够，于是找了Huploadify替代uploadify，原因如下：

1、不依赖于flash。

2、库文件大小是uploadify的三分之一。

3、浏览器兼容性测试，支持ie11、firefox(版本 33.1.1)、chrome(版本 38.0.2125),移动端支持安卓，iPhone图片上传（其他浏览器没测）。

4、不用改服务端。

一、接下来说下Huploadify的安装：

git下载地址：https://github.com/Double-Lv/Huploadify

下载后如下css和js文件在head中引入（jquery.Huploadify.js要在jquery库文件后引入）：

Huploadify.css 

jquery.Huploadify.js

二、实现上传代码：

html如下

[html]  view plain  copy

1. <img src="" alt="" class="cardImg" id="imgid"/><!--预览图片-->  
2. <div id="fileid"></div><!--图片上传按钮-->  

js如下

[javascript]  view plain  copy

1. /* 
2. *图片上传公共方法 
3. *domName  图片上传的div的ID 
4. *domPic  显示上传后图片img的ID，如无图片预览可不设置 
5. */  
6. function uploadInit(domName,domPic){  
7.         $("#"+domName).Huploadify({  
8.             auto:true,  
9.             fileTypeExts:'*.*',  
10.             multi:false,  
11.             fileObjName:'Filedata',  
12.             fileSizeLimit:99999999999,  
13.             showUploadedPercent:false,  
14.             buttonText:'上传',  
15.             uploader:param.uploadurl,  
16.             onUploadSuccess:function(file,data){  
17.                 var Data=JSON.parse(data);  
18.                 if(Data.success==true){  
19.                      $("#"+domPic).attr("src",Data.result);  
20.                     param.uploadsuccess(Data.result);  
21.                 }else{  
22.                      jQuery.longhz.alert(Data.resultDes);  
23.                 }  
24.             },  
25.             onUploadError:function(file,response){  
26.                 jQuery.longhz.alert("上传失败!");  
27.             }  
28.         });  
29.           
30.     }  
31. //调用公共方法  
32. uploadInit("fileid","imgid");  

三、Huploadify的配置
打开jquery.Huploadify.js能看到Huploadify的完整配置项，如下：

[javascript]  view plain  copy

1. var defaults = {  
2.             fileTypeExts:'*.*',//允许上传的文件类型，格式'*.jpg;*.doc'  
3.             uploader:'',//文件提交的地址  
4.             auto:false,//是否开启自动上传  
5.             method:'post',//发送请求的方式，get或post  
6.             multi:true,//是否允许选择多个文件  
7.             formData:null,//发送给服务端的参数，格式：{key1:value1,key2:value2}  
8.             fileObjName:'file',//在后端接受文件的参数名称，如PHP中的$_FILES['file']  
9.             fileSizeLimit:2048,//允许上传的文件大小，单位KB  
10.             showUploadedPercent:true,//是否实时显示上传的百分比，如20%  
11.             showUploadedSize:false,//是否实时显示已上传的文件大小，如1M/2M  
12.             buttonText:'选择文件',//上传按钮上的文字  
13.             removeTimeout: 1000,//上传完成后进度条的消失时间，单位毫秒  
14.             itemTemplate:itemTemp,//上传队列显示的模板  
15.             onUploadStart:null,//上传开始时的动作  
16.             onUploadSuccess:null,//上传成功的动作  
17.             onUploadComplete:null,//上传完成的动作  
18.             onUploadError:null, //上传失败的动作  
19.             onInit:null,//初始化时的动作  
20.             onCancel:null,//删除掉某个文件后的回调函数，可传入参数file  
21.             onClearQueue:null,//清空上传队列后的回调函数，在调用cancel并传入参数*时触发  
22.             onDestroy:null,//在调用destroy方法时触发  
23.             onSelect:null,//选择文件后的回调函数，可传入参数file  
24.             onQueueComplete:null//队列中的所有文件上传完成后触发  
25.         }  

看注释基本能看懂，不明白的找到相应的方法定义可知方法的使用条件，比如

[javascript]  view plain  copy

1. onUploadSuccess：在返回状态status为200时触发  
2. onUploadError：返回状态status不为200时触发  
3. onUploadComplete：在onUploadSuccess或onUploadError触发后触发