之前項(xiàng)目用uploadify(flash version)實(shí)現(xiàn)圖片上傳功能，但是由于chrome瀏覽器已經(jīng)屏蔽flash，并且flash的上傳插件瀏覽器兼容性也不夠，于是找了Huploadify替代uploadify，原因如下：
1、不依賴于flash。
2、庫(kù)文件大小是uploadify的三分之一。
3、瀏覽器兼容性測(cè)試，支持ie11、firefox(版本 33.1.1)、chrome(版本 38.0.2125),移動(dòng)端支持安卓，iPhone圖片上傳（其他瀏覽器沒(méi)測(cè)）。
4、不用改服務(wù)端。
一、接下來(lái)說(shuō)下Huploadify的安裝：
git下載地址：https://github.com/Double-Lv/Huploadify
考慮到部分朋友無(wú)法打開GitHub，直接戳這里下載吧！
Huploadify-master.zip
下載后如下css和js文件在head中引入（jquery.Huploadify.js要在jquery庫(kù)文件后引入）：
Huploadify.css
jquery.Huploadify.js
二、實(shí)現(xiàn)上傳代碼：
html如下
<img src="" alt="" class="cardImg" id="imgid"/><!--預(yù)覽圖片--> <div id="fileid"></div><!--圖片上傳按鈕-->
js如下
/*
*圖片上傳公共方法
*domName 圖片上傳的div的ID
*domPic 顯示上傳后圖片img的ID，如無(wú)圖片預(yù)覽可不設(shè)置
*/
function uploadInit(domName,domPic){
$("#"+domName).Huploadify({
auto:true,
fileTypeExts:'*.*',
multi:false,
fileObjName:'Filedata',
fileSizeLimit:99999999999,
showUploadedPercent:false,
buttonText:'上傳',
uploader:param.uploadurl,
onUploadSuccess:function(file,data){
var Data=JSON.parse(data);
if(Data.success==true){
$("#"+domPic).attr("src",Data.result);
param.uploadsuccess(Data.result);
}else{
jQuery.longhz.alert(Data.resultDes);
}
},
onUploadError:function(file,response){
jQuery.longhz.alert("上傳失敗!");
}
});
}
//調(diào)用公共方法
uploadInit("fileid","imgid");三、Huploadify的配置
打開jquery.Huploadify.js能看到Huploadify的完整配置項(xiàng)，如下：
var defaults = {
fileTypeExts:'*.*',//允許上傳的文件類型，格式'*.jpg;*.doc'
uploader:'',//文件提交的地址
auto:false,//是否開啟自動(dòng)上傳
method:'post',//發(fā)送請(qǐng)求的方式，get或post
multi:true,//是否允許選擇多個(gè)文件
formData:null,//發(fā)送給服務(wù)端的參數(shù)，格式：{key1:value1,key2:value2}
fileObjName:'file',//在后端接受文件的參數(shù)名稱，如PHP中的$_FILES['file']
fileSizeLimit:2048,//允許上傳的文件大小，單位KB
showUploadedPercent:true,//是否實(shí)時(shí)顯示上傳的百分比，如20%
showUploadedSize:false,//是否實(shí)時(shí)顯示已上傳的文件大小，如1M/2M
buttonText:'選擇文件',//上傳按鈕上的文字
removeTimeout: 1000,//上傳完成后進(jìn)度條的消失時(shí)間，單位毫秒
itemTemplate:itemTemp,//上傳隊(duì)列顯示的模板
onUploadStart:null,//上傳開始時(shí)的動(dòng)作
onUploadSuccess:null,//上傳成功的動(dòng)作
onUploadComplete:null,//上傳完成的動(dòng)作
onUploadError:null, //上傳失敗的動(dòng)作
onInit:null,//初始化時(shí)的動(dòng)作
onCancel:null,//刪除掉某個(gè)文件后的回調(diào)函數(shù)，可傳入?yún)?shù)file
onClearQueue:null,//清空上傳隊(duì)列后的回調(diào)函數(shù)，在調(diào)用cancel并傳入?yún)?shù)*時(shí)觸發(fā)
onDestroy:null,//在調(diào)用destroy方法時(shí)觸發(fā)
onSelect:null,//選擇文件后的回調(diào)函數(shù)，可傳入?yún)?shù)file
onQueueComplete:null//隊(duì)列中的所有文件上傳完成后觸發(fā)
}看注釋基本能看懂，不明白的找到相應(yīng)的方法定義可知方法的使用條件，比如
onUploadSuccess：在返回狀態(tài)status為200時(shí)觸發(fā) onUploadError：返回狀態(tài)status不為200時(shí)觸發(fā) onUploadComplete：在onUploadSuccess或onUploadError觸發(fā)后觸發(fā)
